Change Event Select di Javascript

FSodic.ID - Halo para jomblo, gimana kabar kalian? Wifi aman? Atau lagi terisolir? Tenang, make VPN bisa kok buat buka isolirnya :wkwk:

Oke dikesempatan kali ini, saya akan membagikan tutorial Event Onchange dengan Pure Javascript dan JQuery. Jadi gak main-main tutorialnya langsung 2 bentuk :gagah:

Mengingat ada salah satu tema di WapBlog.ID yang tidak menggunakan Internal atau External Javascript, Posting ini mungkin bisa untuk menambah materi posting yang ntah berapa tahun tidak ada tambahan :wkwk:

Mengintip menu tema tersebut, saya mendapatkan element seperti ini:

<select class="mudon" name="url" onchange="window.open(this.options[this.selectedIndex].value,'_top')">

<option>Menu</option>

<option value="https://official.wapblog.id">Home</option>

<option value="https://official.wapblog.id/about.xhtml">About</option>

</select>

Kita analisa terlebih dahulu, terdapat attribut onchange pada element select diatas yang mana akan membuka jendela baru dengan url dari nilai pada tag option yang didalamnya terdapat nilai _top yang artinya jendela baru tersebut dibuka pada tab saat ini. Dari analisa ini, kita telah mendapatkan:

- window.open

- URL menggunakan nilai option

Sekarang mari kita pindahkan ke inline tersebut menjadi sebuah Internal Javascript,

HTML Kita buang attribut onchange dan ubah menjadi ID url:

<select class="mudon" id="url">

<option>Menu</option>

<option value="https://official.wapblog.id">Home</option>

<option value="https://official.wapblog.id/about.xhtml">About</option>

</select>

Native/Pure Javascript, (biasakan taruh diakhir document sebelum tag </body>):

<script>document.getElementById('url').addEventListener('change', function(){

var optionValue = this.value;

window.open(optionValue, '_top');

});</script>

Demo? nih saya kasih:

___

Pie, mudah kan atau terlalu mudah? :gagah: Oke, untuk yang butuh JQuery nanti kita bahas diposting selanjutnya ya mblo :palu: Nah untuk menyetting CSS dari Select, juga kita bahas nanti ya. Yang jelas semua bisa :gagah: