Question

所以我是Wordpress的新手，主题是制作汽车平台。不幸的是，在这个主题上，汽车销售功能与我们的需求不同。其中之一是：显示或隐藏基于先前选择的选项和下拉列表。

简单示例：如果在'Make'上选择'BMW'，则只在'模型'上显示'1系列''3系列''5系列' ，如果选择'3系列，那么只在'引擎'上显示318i 320i 330i ，aso。从逻辑的角度来看，它很容易，但我不知道如何将其转换为代码。幸运的是，我已经在这里找到了相当不错的代码，但这仅适用于下一个下拉列表。我的问题是，javascript / jquery代码如何看起来像这样你可以使超过2个条件下拉列表？您可以将Engine作为示例。谢谢

HTML code：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="req_make">Make</label>
<select id="req_make" name="make">
    <option disabled="disabled" selected="selected" value="">Choose Make</option>
    <option class="BMW" value="BMW">BMW</option>
    <option class="Audi" value="Audi">Audi</option>
    <option class="VW" value="VW">VW</option>
</select>

<label for="req_model">Model</label>
<select id="req_model" name="model">
    <option disabled="disabled" selected="selected" value="">Choose model</option>
    <option class="BMW" value="1er">1er</option>
    <option class="BMW" value="3er">3er</option>
    <option class="BMW" value="5er">5er</option>
    <option class="BMW" value="7er">7er</option>
    <option class="Audi" value="A4">A4</option>
    <option class="Audi" value="A8">A8</option>
    <option class="Audi" value="Q7">Q7</option>
    <option class="VW" value="Golf">Golf</option>
    <option class="VW" value="Touran">Touran</option>
</select>

<label for="req_engine">Engine</label>
<select id="req_engine" name="engine">
<option disabled="disabled" selected="selected" value="">Choose engine</option>
<option class="BMW" value="7er">7er - 730i</option>
<option class="BMW" value="7er">7er - 730Li</option>
<option class="BMW" value="7er">7er - 735i</option>
</select>

Javascript代码：

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

Answer 1

您可以指定任意数量的选择器组合成单个结果。因此，将$('#req_model option').each(function () { ...更改为$('#req_model option, #req_engine option').each(function () { ...即可解决此问题。

Answer 2

我只是自己做了。它工作正常，但我当然不知道这是否正确。我将前一个列表的值转换为下一个类的值，同时将attr('class')更改为attr('value')。 https://jsfiddle.net/agdkw1xm/

基于先前选择的条件列表选项

2 个答案: