Question

I have a select list like this to select car branch:

<td style="width: 243px">Branch:</td>
<td>
    <select name="Branch" style="width: 235px">
        <option selected="">TOYOTA</option>
        <option>HONDA</option>
        <option>NISSAN</option>
    </select>
</td>

I have three other select lists for name of car:

• One for ‘TOYOTA type’ contain for example COROLLA, CAMRY,RAV4, and
  others
• One for ‘HONDA type’ contain for example CIVIC, ACCORD, others
• One for ‘NISSAN type’ contain for example

If a user selects TOYOTA the ‘TOYOTA’ type select list will appear only without showing other BRANCH Cars. How can I do this?

Answer 1

you can use jquery and show() hide() properties. That will work in every browser.

$(document).ready(function($){

  $('#TOYOTA').click(function() {
    $('#BMWmodels').hide();
    $('#VOLVOmodels').hide();
    $('#TOYOTAmodels').show();
  });
});

Then let CSS do the rest.