根据选择的选项显示/隐藏 div

Question

I have a listen of car makes and car models. When a user selects a certain car make, the relevant models appear in the next drop down.

These are some of options in the car make dropdown. It's a WordPress site so it has been assigned an id and value.

   <option id="level-0" value="29">Alfa Romeo</option>
   <option id="level-0" value="73">Audi</option>
   <option id="level-0" value="75">BMW</option>
   <option id="level-0" value="31">Citroen</option>
   <option id="level-0" value="78">Fiat</option>

Here is are options for the car model dropdown. I have given each option a unique id to link them to their respective car make.

   <option id="cars-bmw" value="172">1 Series</option>
   <option id="cars-bmw" value="173">2 Series</option>
   <option id="cars-bmw" value="106">3 Series</option>
   <option id="cars-audi" value="169">A1</option>
   <option id="cars-audi" value="170">A3</option>
   <option id="cars-audi" value="171">A4</option>

When the page loads, I have already defined the classes .cars-bmw and .cars-audi (etc) as style display: none

I now have javascript to check which option in the first dropdown has been selected. From there it can determine which .car-make to display

Here is a non working fiddle :(

http://jsfiddle.net/HPMkL/

Answer 1

You can't use ids like that since it has to be unique... try an data-* attribute like

<option id="level-0" data-make="cars-audi" value="73">Audi</option>

then in category

<option data-make="cars-audi" value="169">A1</option>
<option data-make="cars-audi" value="170">A3</option>
<option data-make="cars-audi" value="171">A4</option>

then

jQuery(function ($) {
    var $cat = $('#cat'),
        $models = $cat.find('option').slice(1).remove(),
        $test = $('#test');
    $test.change(function () {
        $models.add($cat.find('option').slice(1).remove());
        var $opts = $models.filter('[data-make="' + $(this).find('option:selected').data('make') + '"]');
        $cat.append($opts)
    }).change()
})

Demo: Fiddle

Answer 2

Try this. I did some modification

$('#test').change(function(){
if(document.getElementById('test').value == "73") {
     document.getElementById('cars-audi').style.display="inline";
}});