0

我有 3 个选择框，都填充了相同的数据。使用 jquery 我想要么 a) 禁用相同的选项，要么 b) 从其他两个选择框中删除相同的选项。我已经发布了下面的html。你会注意到我已经在 select disabled 中有一些标题，这些标题需要保持这种状态。无论用户从哪个选择框开始，这都需要工作。因此，如果选择三个选项 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>
4

2 回答 2

0

尝试这个：

$('.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 示例。

于 2012-05-09T16:52:14.257 回答
0

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

$(".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");
    });
});​
于 2012-05-09T17:32:29.713 回答