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

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>");
}

});