javascript - 用html和js连接两个组合框

我试图使这两个组合框相互结合。但是，我的问题是，如果选择类别，则第二个组合框无法更改。

这就是我所做的。

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>
    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的类别为Mouse
PilihBarang表示前鼠标Logitech M185的项目

最佳答案

您可以检查以下代码吗？使用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