0

3つの選択ボックスがあり、すべて同じデータが入力されています。jqueryを使用して、a）同じオプションを無効にするか、b）他の2つの選択ボックスから同じオプションを削除したいと思います。以下のhtmlを投稿しました。選択範囲内にすでにいくつかのヘッダーが無効になっていることに気付くでしょう。それらはそのままにしておく必要があります。これは、ユーザーがどの選択ボックスから始めても機能する必要があります。したがって、3つのオプション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 に答える