www.webdeveloper.com
Results 1 to 3 of 3

Thread: Show Hide select options based on previous selection dropdown

  1. #1
    Join Date
    Feb 2012
    Posts
    2

    Show Hide select options based on previous selection dropdown

    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:
    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.

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623

  3. #3
    Join Date
    Feb 2012
    Posts
    2
    Thanks, I will have a look at it

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles