Question

我将在所有10个菜单中拥有5组具有相同详细信息的选择下拉列表。它们将成对出现，如果在任何一对中您选择其中一个选项，则另一个选择框会禁用该选项。

我有以下

$(document).ready(function () {
    $('select').change(function () {
        $('select.fix1 option').attr('disabled', false);
        $('select.fix1').each(function() {
            var val = $(this).find('option:selected').val();
            if (!val) return;
            $('select.fix1 option').filter(function() {
                return $(this).val() == val;
            }).attr('disabled', 'disabled');
        });
    });
});

这将规则完美地应用于2个下拉列表，但是如何将它应用于fix1，fix2，fix3，fix4和fix5配对而不重复代码5次？

Answer 1

对于jQuery选择器，您可以将多个选择器与逗号（如css-selectors）组合使用：

$(document).ready(function () {
    $('select').change(function () {
        $('select.fix1 option, select.fix2 option, select.fix3 option').attr('disabled', false);
        $('select.fix1,select.fix2,select.fix3').each(function(key, el) {
            var val = $(this).find('option:selected').val();
            if (!val) return;
            $(el).find('option').filter(function() {
                return $(this).val() == val;
            }).attr('disabled', 'disabled');
        });
    });
});

但最好只将一些公共类设置为右选择器，而不是像

一样

$(document).ready(function () {
    $('select').change(function () {
        $('select.commonClass option').attr('disabled', false);
        $('select.commonClass').each(function(key, el) {
            var val = $(this).find('option:selected').val();
            if (!val) return;
            $(el).find('option').filter(function() {
                return $(this).val() == val;
            }).attr('disabled', 'disabled');
        });
    });
});

将脚本应用于多组2个下拉列表

1 个答案: