how to show/hide div based on selected option's id?

Question

I have this vehicles invoice form with 5 rows. each row can be a different vehicle but if a car is selected, it shows you a second select list to chose its color.

here is my javascript:

<script>
    $(document).ready(function() {
        $("#select1").change(function(event) {
            var id = $(event.target).id();

            $("#" + id).show();
        });
    });
</script>

here is my form:

  <form name="invoice" action="invoice.php">
  <table border="1">
    <tr>
        <td>SN</td>
        <td>Vahicle Type</td>
        <td>Quantity</td>
    </tr>


      <?php $sn = 1 ;
       while ($sn < 5){ ?>

    <tr>
        <td>
            <?php echo $sn ?>
        </td>
        <td>
              <select name="vehicles[]" id="select1">
                  <option id="0" value="0">Select Vehicle</option>
                  <option id="<?php echo $sn ?>" value="toyota" name="toyota">Toyota</option>
                  <option id="<?php echo $sn ?>" value="nissan" name="nissan">Nissan</option>
                  <option id="<?php echo $sn ?>" value="BMW" name="bmw">BMW</option>
                  <option id="0" value="plane" name="plane">Plane</option>
                  <option id="0" value="boat" name="boat">Boat</option>
                  <option id="0" value="bike" name="bike">Bike</option>

              </select>    

          <div id="<?php echo $sn ?>" class="toggleable" style="display:none;">
              <select name="color[]" id="select2">
                  <option id="<?php echo $sn ?>" value="red" name="red">Red</option>
                  <option id="<?php echo $sn ?>" value="black" name="black">Black</option>
                  <option id="<?php echo $sn ?>" value="white" name="white">White</option>          
              </select>    
          </div>

        </td>

        <td>
            <input type="number" name="quantity[]">
        </td>
    </tr>

            <?php $sn=$sn+1; } ?>
</table>
</form>

im not so good with javascript. i wrote this code by learning from online examples but its not working.

Answer 1

As tomas_b said, you should be using a data-* attribute for this. Element IDs must be unique within the document, if you duplicate them then getElementById will only return the first one (mostly).

If the listener is on the select element, then it will be this within the function, its properties can be accessed directly. There is also rarely any need to add an ID to a form control that already has a name, and select elements should always have one option with the selected attribute so that you know one will be selected by default.

So you might do something like:

 window.onload = function() { document.getElementById('select1').onchange = handleVehicleChange; } function handleVehicleChange() { var opt = this.options(this.selectedIndex); document.getElementById('carTypes').style.display = opt.getAttribute('data-type') == 'car'? '' : 'none'; } 

  <select name="vehicles[]" id="select1"> <option id="0" value="0" selected>Select Vehicle</option> <option data-type="car" value="toyota">Toyota</option> <option data-type="car" value="nissan">Nissan</option> <option data-type="car" value="BMW">BMW</option> <option data-type="aeroplane" value="plane">Plane</option> <option data-type="boat" value="boat">Boat</option> <option data-type="bike" value="bike">Bike</option> </select> <div id="carTypes" class="toggleable" style="display:none;"> <select name="color[]" id="select2"> <option value="red">Red</option> <option value="black">Black</option> <option value="white">White</option> </select> </div> 

Answer 2

To obtain the value of the selected option "id" attribute using jQuery, you can use the following jQuery snippet

var id = $("#select1 > option:selected").attr('data-id');

See it in action: http://plnkr.co/edit/bWj0MzLey0n4dkI03bs1?p=preview

The query here simply gets you the selected option using the ":selected" selector ( https://api.jquery.com/category/selectors/ ).

However as seen in the example, you should use a different attribute name for the option tags, eg "data-id", as "id" has its purpose.