Show Hide select options based on previous selection dropdown

[ArneK]

Thanks for reading my question... ;-)

I'm building a Wordpress site that uses Custom Posts and Custom Fields to show a vehicle inventory. I would like the visitor to be able to filter the posts by Taxonomies...

The plugin I use for drilling the available Taxonomies (Query Multiple Taxonomies) outputs all options it can find for that particular Taxonomy into a dropdown list.

To prevent the dropdown list (i.e. Model) to become too long, I would like to show only those options that are based on the previous selection.

So when the visitor selects Vehicle = Cars, the dropdown for Manufacturer should only show the car manufacturers. When the visitor selects a manufacturer, i.e. Ford, the next dropdown for selecting a model should only show the models available for the previous selected manufacturer, in this case Ford...

The labels and level-0 values don't change but when I add or change a manufacturer or model, the level-1 and/or level-2 changes.

Not that important but, if possible, it would also be nice to strip everything not needed to show up in the "filtered" dropdown. In case of the Manufacturer dropdown, level-0 and all the spaces are not needed. In case of the Model dropdown, level-0, level1 and all the spaces are not needed after selection.

Here's a sample of the HTML-code:

<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
    <option></option>
    <option class="level-0" value="cars" >Cars</option>
    <option class="level-0" value="motorcycles" >Motorcycles</option>
</select>

<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
    <option></option>
    <option class="level-0" value="cars" >Cars</option>
    <option class="level-1" value="ford" >&nbsp;&nbsp;&nbsp;Ford</option>
    <option class="level-1" value="chevrolet" >&nbsp;&nbsp;&nbsp;Chevrolet</option>

    <option class="level-0" value="motorcycles" >Motorcycles</option>
    <option class="level-1" value="honda" >&nbsp;&nbsp;&nbsp;Honda</option>
    <option class="level-1" value="yamaha" >&nbsp;&nbsp;&nbsp;Yamaha</option>    
</select>

<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
    <option></option>
    <option class="level-0" value="cars" >Cars</option>
    <option class="level-1" value="ford" >&nbsp;&nbsp;&nbsp;Ford</option>
    <option class="level-2" value="model-1-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>
    <option class="level-1" value="chevrolet" >&nbsp;&nbsp;&nbsp;Chevrolet</option>
    <option class="level-2" value="model-1-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>    

    <option class="level-0" value="motoren" >Motorcycles</option>
    <option class="level-1" value="honda" >&nbsp;&nbsp;&nbsp;Honda</option>
    <option class="level-2" value="model-1-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>
    <option class="level-1" value="yamaha" >&nbsp;&nbsp;&nbsp;Yamaha</option>
    <option class="level-2" value="model-1-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>
</select>

I can do some simple things with Javascript but this is not simple to me, sorry... ;-)

Can someone please help me to figure out how to do this in Javascript/JQuery? Cross browser would be great!

Thanks in advance!

Kind regards,

Arne.

[DanInMA]

here are some examples, maybe this will help

http://www.gostomski.co.uk/jquery/ea...t-using-jquery
http://www.script-tutorials.com/crea...s-with-jquery/

[ArneK]

Thanks, I will have a look at it