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

您需要使用 javascript 或 jquery。

我是这样做的。

获取选择的类：

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

然后使用level类来隐藏或显示

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

编辑：

为了阐明如何使用它：它使用了代码的稍微修改的版本

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

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