Question

我有3个选择框，全部填充相同的数据。使用jquery我想要a）禁用相同的选项或b）从其他两个选择框中删除相同的选项。我在下面发布了html。你会注意到我已经在禁用的选择中有一些标题，那些需要保持这种方式。无论用户选择哪个选择框，这都需要工作。因此，如果选择了三个选项2，则禁用选择1和2。

jquery几个小时一直在逃避我。

编辑：我忘了添加一些东西。如果您更改选择，我需要它来启用以前选择的选项。此外，我希望每个列表中的第一个选项（ - ）始终可用。

<fieldset class="fields1">
        <dl>
            <dt><label for="char_cs">test:</label></dt>
            <dd>
                <select id="char_cs1" name="char_cs1" class="char_cs">
                    <option value="">--</option>
                    <option disabled="disabled">header 1</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    <option disabled="disabled">header 2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    <option disabled="disabled">header 3</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                </select>
            </dd>
        </dl>
        <dl>
            <dd>
                <select id="char_cs2" name="char_cs2" class="char_cs">
                    <option value="">--</option>
                    <option disabled="disabled">header 1</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    <option disabled="disabled">header 2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    <option disabled="disabled">header 3</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                </select>
            </dd>
        </dl>
        <dl>
            <dd>
                <select id="char_cs3" name="char_cs3" class="char_cs">
                    <option value="">--</option>
                    <option disabled="disabled">header 1</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    <option disabled="disabled">header 2</option>
                        <option value="3">3</option>
                            <option value="4">4</option>
                    <option disabled="disabled">header 3</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                </select>
            </dd>
        </dl>
        </fieldset>

Answer 1

试试这个：

$('.char_cs').change(function() {
    var ary = new Array();
    $('.char_cs option:selected').each(function() {
        if ($(this).val().length > 0) {
            ary.push($(this).val());
        }
    });
    $('.char_cs option').each(function() {
        if ($(this).val().indexOf('header')!=0) {
            if ($.inArray($(this).val(), ary) > -1) {
                $(this).attr('disabled', 'disabled');
            } else {
                $(this).removeAttr('disabled');
            }
        }
    });
});

<强> jsFiddle example

Answer 2

看看here。我已经做到这一点，它不会禁用活动选择中的条目。此外，一旦您更改了所选的选项，它就会在其他选项中可用。

$(".char_cs").change(function(){
    $("select>option:not([value^=header])").removeAttr("disabled");
    $(".char_cs").each(function()
    {
        var id = $(this).attr("id").substring(7);
        var val = $(this).val();
        $(".char_cs:not([id=char_cs"+id+"])>option(:not[value=--],[value="+val+"])").attr("disabled","disabled");
    });
});

在所有下拉菜单中选择已禁用类似信息的框

2 个答案: