Change dropdown options based on previous dropdown choice (filtered search)

Question

I am working with a WordPress theme that offers a search form creator. It assigns a category to a search dropdown. My categories are car make and car model. However, I would like the list of car models to be determined on what car make has been chosen in the first field - to incorporate filtered search.

How can I dynamically change options in the second dropdown based on the choice of the first?

For example, if the user selects Audi, only A1, A3 and A4 should be visible in the next dropdown.

<form action="http://*.com/browse/" method="post" class="search_cars">


<label for="brand">Make:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–</option>
<option class="level-0" value="73">Audi</option>
<option class="level-0" value="75">BMW</option>
</select>

<label for="brand">Model:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–</option>
<option class="level-0" value="172">1 Series</option>
<option class="level-0" value="173">2 Series</option>
<option class="level-0" value="106">3 Series</option>
<option class="level-0" value="169">A1</option>
<option class="level-0" value="170">A3</option>
<option class="level-0" value="171">A4</option>
</select>


<input type="submit" id="buy_car_submit" name="buy_car_submit" value="Find Cars">
<input type="hidden" name="search_form_id" value="298">

Answer 1

I created this jsfiddle to show you what I'd go with: http://jsfiddle.net/BSjWx/ Use something that changes the Models whenever you choose the make:

<div class="ccms_form_element cfdiv_custom" id="style_container_div">

<label for="brand">Make:</label>

<select size="1" id="make" type="select" name="style">
<option value="-1">–Choose a Make-</option>
<option class="level-0" value="Audi">Audi</option>
<option class="level-0" value="BMW">BMW</option>
</select>
    <div class="clear"></div><div id="error-message-style"></div>

<div id="BMW"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label for="brand">Model:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–Choose a Model-</option>
<option class="level-0" value="172">1 Series</option>
<option class="level-0" value="173">2 Series</option>
<option class="level-0" value="106">3 Series</option>
</select>
</div>
<div id="Audi"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label for="brand">Model:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–Choose a Model-</option>
<option class="level-0" value="169">A1</option>
<option class="level-0" value="170">A3</option>
<option class="level-0" value="171">A4</option>
</select>
</div>
<div class="clear"></div>
<div id="error-message-style-sub-1"></div></div>

Then use this jQuery to change each time a make is chosen:

$("#make").change ( function () {
    var targID  = $(this).val ();
    $("div.style-sub-1").hide ();
    $('#' + targID).show ();
} )