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:

<divclass="ccms_form_element cfdiv_custom"id="style_container_div"><labelfor="brand">Make:</label><selectsize="1"id="make"type="select"name="style"><optionvalue="-1">–Choose a Make-</option><optionclass="level-0"value="Audi">Audi</option><optionclass="level-0"value="BMW">BMW</option></select><divclass="clear"></div><divid="error-message-style"></div><divid="BMW"class="style-sub-1"style="display: none;"name="stylesub1"onchange="ChangeDropdowns(this.value)"><labelfor="brand">Model:</label><selectname="cat"id="cat"class="postform"><optionvalue="-1">–Choose a Model-</option><optionclass="level-0"value="172">1 Series</option><optionclass="level-0"value="173">2 Series</option><optionclass="level-0"value="106">3 Series</option></select></div><divid="Audi"class="style-sub-1"style="display: none;"name="stylesub1"onchange="ChangeDropdowns(this.value)"><labelfor="brand">Model:</label><selectname="cat"id="cat"class="postform"><optionvalue="-1">–Choose a Model-</option><optionclass="level-0"value="169">A1</option><optionclass="level-0"value="170">A3</option><optionclass="level-0"value="171">A4</option></select></div><divclass="clear"></div><divid="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 ();
} )