Online Web Tutorial

Change Event Select di Javascript

Animate - Change Event Input di Javascript dan JQuery

FSodic.ID - Halo para jomblo, gimana kabar kalian? Wifi aman? Atau lagi terisolir? Tenang, make VPN bisa kok buat buka isolirnya
Oke dikesempatan kali ini, saya akan membagikan tutorial Event Onchange dengan Pure Javascript dan JQuery. Jadi gak main-main tutorialnya langsung 2 bentuk

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

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? Oke, untuk yang butuh JQuery nanti kita bahas diposting selanjutnya ya mblo Nah untuk menyetting CSS dari Select, juga kita bahas nanti ya. Yang jelas semua bisa