2つのコンボボックスをhtmlとjsで接続する

Question

私はこれらの2つのコンボボックスを互いに結合しようとしています。しかし、私の問題は、カテゴリを選択すると、2番目のコンボボックスが変更できないということです。

これは私がやったことです。

HTMLコード

<!-- language: lang-html --> 

<label for="JenisBarang">Jenis Barang</label> 
<br> 
<select id="JenisBarang" name="JenisBarang"> 
    <option value="0" selected="selected">Mouse</option> 
    <option value="1">Keyboard</option> 
    <option value="2">Webcam</option> 
</select> 
<br> 

<label for="PilihBarang">Pilih Barang</label> 
<br> 
<select id="PilihBarang_0" name="PilihBarang_0" style="display: inline;"> 
    <option value="1">Asus GX-1000</option> 
    <option value="2">Logitech M238 Edisi : Burung Hantu</option> 
    <option value="3">Logitech M238 Edisi : Astronot</option> 
    <option value="4">Logitech M238 Edisi : Musang</option> 
    <option value="5">Logitech M238 Edisi : Kera</option> 
    <option value="6">Lenovo N700</option> 
    <option value="7">Asus Gladius</option> 
</select> 
<select id="PilihBarang_1" name="PilihBarang_1" style="display: none;"> 
    <option value="1">Logitech K400r</option> 
    <option value="2">Logitech MK240</option> 
    <option value="3">Asus GK2000</option> 
</select> 
<select id="PilihBarang_2" name="PilihBarang_2" style="display: none;"> 
    <option value="1">Lenovo Webcam</option> 
    <option value="2">Logitech C920</option> 
</select> 
<br> 

JavaスクリプトCODE

<script> 
    function change_product(evt) 
    { 
    var JenisBarang=document.getElementById('JenisBarang'),whichstate; 

    whichstate=JenisBarang.options[state.selectedIndex].value; 

    for(var i=0;i<JenisBarang.options.length;i++) 
     document.getElementById('PilihBarang_'+i).style.display=(i==whichstate ? 'inline':'none'); 
    } 
</script> 

辞書

• JenisBarangは、意味カテゴリEXマウス
• PilihBarangは、アイテムの元のマウスロジクールM185

Answer 1

では、次のコードをチェックできることを意味します。 valueを使用して、2番目のコンボボックスでオプションを指定します。それは説明することができない単純なコードです..私はコメントのカップルを配置している。

$("#comboBox1").change(function() { 
 
    if ($(this).data('options') === undefined) { 
 
    /* Get all the options in second Combo box*/ 
 
    $(this).data('options', $('#comboBox2 option').clone()); 
 
    } 
 
    var id = $(this).val(); 
 
    var options = $(this).data('options').filter('[value=' + id + ']'); 
 
    $('#comboBox2').html(options); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<select name="comboBox1" id="comboBox1"> 
 
    <option value="0">Please Select</option> 
 
    <option value="1">Mouse</option> 
 
    <option value="2">Keyboard</option> 
 
    <option value="3">WebCam</option> 
 
</select> 
 

 
<!-- Second Combo Box--> 
 
<select name="comboBox2" id="comboBox2"> 
 
    <option value="1">Mouse Model 1</option> 
 
    <option value="1">Mouse Model 2</option> 
 
    <option value="1">Mouse Model 3</option> 
 
    <option value="2">Keyboard model 1</option> 
 
    <option value="2">Keyboard model 2</option> 
 
    <option value="2">Keyboard model 3</option> 
 
    <option value="3">webcam model 1</option> 
 
    <option value="3">webcam model 2</option> 
 
</select>

編集：JSフィドルリンクJS Fiddle