在Jquery或Javascript中显示基于先前选择下拉列表的隐藏选择选项

Question

我正在构建一个WordPress站点，它使用自定义站点和自定义字段来显示车辆库存。我希望访客能够通过分类法过滤这些帖子.

我用来钻取可用分类法(查询多个分类法)的插件将它可以为该特定分类法找到的所有选项输出到下拉列表中。

为了防止下拉列表(即Model)变得太长，我只想显示那些基于前面选择的选项。

因此，当访问者选择Vehicle = car时，制造商的下拉菜单应该只显示汽车制造商。当访问者选择制造商，即福特时，下一个选择模型的下拉菜单应该只显示以前选择的制造商可用的型号，在这种情况下，福特.

标签和级别-0值不会改变，但当我添加或更改制造商或型号时，级别-1和/或级别-2会发生变化。

没有那么重要，但是，如果可能的话，如果可能的话，把不需要出现在“过滤”下拉列表中的所有东西都去掉也是很好的。如果制造商下拉，级别-0和所有的空间是不需要的。在模型下拉时，级别-0、level1和所有空格在选择后都不需要。

我可以用JavaScript做一些简单的事情，但这对我来说并不简单，对不起.-)我寻找技巧和例子，并试图使它发挥作用，但没有运气。

有谁能帮我弄清楚如何在jQuery中做到这一点吗？

这是密码，

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

编辑

为了说明如何使用它:它使用了稍微修改过的代码版本。

​

$(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

一个Javascript也许能帮你..。您可以在"onchange“组件中添加"select”事件(在Javascript中)。另外，为ID添加一个labels。

示例：

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

使用script标记，在javascript中构建方法如下：

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

上面的代码更改标签文本的运行时间，实现它以在您的第二个dropdown (模型)中进行更改

希望它能帮到你。

Answer 3

还有另一种方法来实现这一点--检查这个Fiddle示例：Fiddle

您可以从这个例子中学习，并为第三个选项框添加所需的逻辑。

jQuery代码：

$('#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>");
}

});