用html和js连接两个组合框

Question

我想让这两个组合框互相连接。但是，我的问题是，如果我选择类别，我的第二个组合框无法更改。

这就是我所做的。

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 Script代码

<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意味着该类别前鼠标
• PilihBarang意味着EX鼠标罗技M185

Answer 1

您可以检查以下代码的项目。使用value在第二个组合框中指定选项。这是一个简单的代码，希望没有任何解释..我已经放置了几条评论。

$("#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