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

Vehicle:

    
    Cars
    Motorcycles

Manufacturer:

    
    Cars
       Ford
       Chevrolet
    Motorcycles
       Honda
       Yamaha