Jquery ile Selectbox İçeriğini Dinamik Olarak Değiştirme Mantığı

Merhaba. Başlıkta anlatmaya çalışsam da pek anlatamadım gibi hissettim. O yüzden detayları buradan vereceğim. En yalın haliyle bir web sayfamız içerisinde iki adet select box elementimizin olduğunu düşünelim. Biri üst kategori, diğeri alt kategori olsun. Yani o mantıkla çalışsın.

Örneklemek gerekirse en yaygın örneği il – ilçe seçimi. Örneğin il seçimini İstanbul yaptıysam ilçe elementinde İstanbul ilçeleri gelmeli. Diğer ilçelerin gelmesine gerek yok. Bunun için her il değiştirildiğinde post mu atmamıza gerek var? Tabi ki hayır. jQuery kütüphanesi yardımıyla bu konuyu kolaylıkla halledebiliriz.

Nasıl mı?

Öncelikle elementlerimizi oluşturalım.

<select name="select1" id="select1">
    <option value="1">Meyveler</option>
    <option value="2">Hayvanlar</option>
    <option value="3">Şehirler</option>
    <option value="4">Arabalar</option>
</select>

<select name="select2" id="select2">
    <option value="1">Çilek</option>
    <option value="1">Elma</option>
    <option value="1">Portakal</option>
    <option value="2">Kurt</option>
    <option value="2">Kuzu</option>
    <option value="2">Güvercin</option>
    <option value="3">Bursa</option>
    <option value="3">İstanbul</option>
    <option value="4">BWM<option>
</select>

jQuery

var $select1 = $( '#select1' ),
		$select2 = $( '#select2' ),
    $options = $select2.find( 'option' );
    
$select1.on( 'change', function() {
	$select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );

Demo: https://jsfiddle.net/fwv18zo1/ (İngilizce)