JavaScript - 根据所选选项隐藏按钮

Question

我有两个(或在某些地方更多)带有多个选项的下拉菜单(选择)。还有一个用于清除下拉列表中所有选定值的按钮。此清除按钮的一个方面无法满足我的需要。

仅当下拉菜单选择了带值的选项时才会显示该按钮，选择空值的选项后，按钮将隐藏。在我在两个下拉菜单中选择一些选项(显示按钮)然后将其中一个的值从这个下拉菜单更改为没有值的选项(按钮被隐藏)。问题是，在下拉菜单中的一个值为空后，该按钮被隐藏。

只有当所有下拉菜单都选择了一个空值的选项时，我才需要隐藏该按钮。这jsfiddle说明了我的意思。

我使用 select2.js 作为下拉菜单。

HTML:

<input type="button" class="opt-clear" value="Clear all dropdowns">
<div class="option">
    <select>
        <option value="">Please select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>
<div class="option">
    <select>
        <option value="">Please select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>

Javascript:

$('select').select2();

$('.option select').change(function() {
var id=$(this).val();
if (id=="") {
    $(".opt-clear").hide();
} else {
    $(".opt-clear").show();
}
}).trigger('change');

$(".opt-clear").click(function() { $(".option select").select2("val", ""); });

Answer 1

您必须检查所有列表中的val。如果至少其中一个有值，则不要隐藏该按钮。您必须使用 each() 和一个 var 作为标志。

尝试:

$('.option select').change(function () {
    var flag = 1;
    $(".option select").each(function (index) {
        var id = $(this).val();
        if (id != "") {
            flag = 0;
        }
    });


    if (flag) {
        $(".opt-clear").hide();
    } else {
        $(".opt-clear").show();
    }
}).trigger('change');

DEMO