CODEWITHSUNDEEP
javascripthtml
Yosua Christianov
Yosua Christianov

Reputation: 27

Connecting two Combo-boxes with html and js

I am trying to make these two combo-boxes join each other. But, my problem is, that my second combo-box cannot change if I select the category.

This is what I've done.

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 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>

Dictionary

Upvotes: 1

Views: 951

Answers (1)

Omal Perera
Omal Perera

Reputation: 3109

Can you check the following Code. use value specify options in the second combo box. It is a simple code hope nothing to explain.. I have placed couple of comments.

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

Edit : JS Fiddle link JS Fiddle

Upvotes: 1

Related Questions