Show Hide select options based on previous selection dropdown in Jquery or Javascript

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.

I can do some simple things with JavaScript but this is not simple to me, sorry... ;-) I searched for tips and examples and tried to make it work but no luck.

Can someone please help me to figure out how to do this in jQuery?

Here is the 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>

Answer 1

You need to use javascript, or jquery.

Here is how I do it.

Get the class that is selected:

var levelClass = $('#qmt-manufacturer').find('option:selected').attr('class');

Then use the level class to hide or show

$('#qmt-model option').each(function () {
    var self = $(this);
    self.hide();
    if (self.hasClass(levelClass)) {
        self.show();
    }
});

Edit:

to clarify how to use this: it uses a slightly altered version of the code

$(function(){
    $("#qmt-vehicle").on("change",function(){
        var levelClass = $('#qmt-vehicle').find('option:selected').attr('class');
        console.log(levelClass);
        $('#qmt-manufacturer option').each(function () {
            var self = $(this);
            if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
                self.show();
            } else {
                self.hide();
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
    <option></option>
    <option class="car" value="cars">Cars</option>
    <option class="motorcycle" value="motorcycles">Motorcycles</option>
</select>
<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
    <option></option>
    <option class="car" value="cars">Cars</option>
    <option class="car" value="ford">&nbsp;&nbsp;&nbsp;Ford</option>
    <option class="car" value="chevrolet">&nbsp;&nbsp;&nbsp;Chevrolet</option>
    <option class="motorcycle" value="motorcycles">Motorcycles</option>
    <option class="motorcycle" value="honda">&nbsp;&nbsp;&nbsp;Honda</option>
    <option class="motorcycle" value="yamaha">&nbsp;&nbsp;&nbsp;Yamaha</option>
</select>

Answer 2

A Javascript might help you... You can add an "onchange" event (in Javascript) in your "select" component. Also, add an ID for the labels.

Example:

<label for="qmt-manufacturer" id="lblManufacturer">
<select id="qmt-manufacturer" name="manufacturer" 
                   onchange="changeManufacturer(this.value);">

Using a script tag, build your method in javascript as following:

<script type="text/javascript">
    function changeManufacturer(manufacturerValue){

         switch(manufacturerValue){
          case ford:
             document.getElementById('lblManufacturer').innerHTML = 'FORD';
             break;
          case chevrolet:
             document.getElementById('lblManufacturer').innerHTML = 'Chevrolet';
             break;
         }

         // And so on for other values...
    }
</script>

this code above changes the Label Text running time, implement it to make changes in your second dropdown (Model)

Hope it helps you.

Answer 3

There is another way to achieve this --- Check this Fiddle example: Fiddle

You can learn from this example and add according logic which you need for the third option box.

jQuery Code:

$('#qmt-vehicle').on('change', function () {
//alert(this.value); // or $(this).val()
if (this.value == 'cars') {
    $("#qmt-manufacturer").html(
        "<option class=\"level-1\" value=\"ford\">&nbsp;&nbsp;&nbsp;Ford</option><option class=\"level-1\" value=\"chevrolet\">&nbsp;&nbsp;&nbsp;Chevrolet</option>");

} else {

    $("#qmt-manufacturer").html(
        "<option class=\"level-1\" value=\"honda\">&nbsp;&nbsp;&nbsp;Honda</option><option class=\"level-1\" value=\"yamaha\">&nbsp;&nbsp;&nbsp;Yamaha</option>");
}

});