Question

我试图让这两个组合框相互加入。但是，我的问题是，如果我选择类别，我的第二个组合框就无法改变。

这就是我所做的。

HTML CODE

<!-- 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 表示前鼠标类别
PilihBarang 表示来自Mouse Logitech 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

使用html和js

1 个答案: