Question

我有3个下拉选项。我希望实现的是type-select == mcd和duration-select == 24以及sc-select == True我希望显示名为COMBINATION_1的div，并隐藏所有其他.div。我想为所有可能的组合做这件事。我知道如何在选择一个下拉列表时执行此操作，但不知道如何使其与多个选项一起使用。

这是我的过滤器HTML：

<div id="option-filters">
<p class="l">Options:</p>
<ul class="filters">
    <li>
        <label for="type-select">Type</label>
        <select id="type-select" class="input-select">
            <option id="type-mcd" value="mcd"> GA</option>
            <option id="type-cp" value="cp"> CP</option>
            <option id="type-prp2pop" value="prp2pop"> PRP2POP</option>
            <option id="type-mnp" value="mnp"> MNP</option>
        </select>
    </li>
    <li>
        <label for="duration-select">Duration</label>
        <select id="duration-select" class="input-select">
            <option id="duration-24" value="24"> 24 </option>
            <option id="duration-12" value="12"> 12 </option>
            <option id="duration-0" value="0"> 0 </option>
        </select>
    </li>
    <li>
        <label for="sc-select"> Device </label>
        <select id="sc-select" class="input-select">
            <option id="sc-true" value="True"> SC</option>
            <option id="sc-false" value="False"> NO SC </option>
            <option id="sc-simonly" value="SimOnly"> NONE </option>
        </select>
    </li>
</ul>

Answer 1

试试这个：

$('#type-select, #duration-select, #sc-select').on('change', function() {
    if ($('#type-select').val() == 'mcd' && $('#duration-select').val() == 24 && $('#sc-select').val() == 'True') {
        // your code 
    }
});

Answer 2

另一种方式，认为有点太多的代码:)。这在页面加载和更改时也有效。

var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
    var vals = $selects.map(function() {
        return this.value;
    }).get();
    if (vals.join('') === "mcd24True") {
        alert ("I am in");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="option-filters">
<p class="l">Options:</p>
<ul class="filters">
    <li>
        <label for="type-select">Type</label>
        <select id="type-select" class="input-select">
            <option id="type-mcd" value="mcd"> GA</option>
            <option id="type-cp" value="cp"> CP</option>
            <option id="type-prp2pop" value="prp2pop"> PRP2POP</option>
            <option id="type-mnp" value="mnp"> MNP</option>
        </select>
    </li>
    <li>
        <label for="duration-select">Duration</label>
        <select id="duration-select" class="input-select">
            <option id="duration-24" value="24"> 24 </option>
            <option id="duration-12" value="12"> 12 </option>
            <option id="duration-0" value="0"> 0 </option>
        </select>
    </li>
    <li>
        <label for="sc-select"> Device </label>
        <select id="sc-select" class="input-select">
            <option id="sc-true" value="True"> SC</option>
            <option id="sc-false" value="False"> NO SC </option>
            <option id="sc-simonly" value="SimOnly"> NONE </option>
        </select>
    </li>
</ul>

Javascript根据多个下拉选项显示/隐藏div

2 个答案: