Change Dropdown Options Based On Previous Dropdown Choice (filtered Search)

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 t

Solution 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 ();
} )