0

それぞれに同じオプションを持つ 8 つのドロップダウンのグループがあります。これらはコード ビハインドでプログラムによって生成されます。重複した選択をチェックし、正常に動作しているエラー メッセージを表示する小さな JavaScript があります。

理想的には、私がやりたいことは、エラーの原因となった選択したドロップダウンと、選択したものに一致するドロップダウンを強調表示することです。ドロップダウンの横にあるアスタリスクまたはそのようなもの。それが理にかなっていることを願っています。

これまでの私のコードは次のとおりです。

<div id="error"></div>
<asp:Panel ID="Panel1" runat="server" ClientIDMode="Static">
<h3>1st preference</h3>
<p><asp:DropDownList ID="Pref1" runat="server" ClientIDMode="Static" /></p>

<h3>2nd preference</h3>
<p><asp:DropDownList ID="Pref2" runat="server" ClientIDMode="Static"/></p>

<h3>3rd preference</h3>
<p><asp:DropDownList ID="Pref3" runat="server" ClientIDMode="Static"/></p>

<h3>4th preference</h3>
<p><asp:DropDownList ID="Pref4" runat="server" ClientIDMode="Static"/></p>

<h3>5th preference</h3>
<p><asp:DropDownList ID="Pref5" runat="server" ClientIDMode="Static"/></p>

<h3>6th preference</h3>
<p><asp:DropDownList ID="Pref6" runat="server" ClientIDMode="Static"/></p>

<h3>7th preference</h3>
<p><asp:DropDownList ID="Pref7" runat="server" ClientIDMode="Static"/></p>

<h3>8th preference</h3>
<p><asp:DropDownList ID="Pref8" runat="server" ClientIDMode="Static"/></p>

</asp:Panel>

そしてJavaScript...

<script type="text/javascript">

$(function () {
    $('select', $('#<% =Panel1.ClientID %>')[0]).change(function () {
        var instance = this;
        var isValidSelection = true;
        var $otherDropdowns = $('select', $('#<% =Panel1.ClientID %>')[0]).not($(this));
        $.each($otherDropdowns, function (i, item) {
            if (instance.value == item.value) {
                isValidSelection = false;
                $('#error').html("<span style=\"color:red\">You have selected a duplicate option</span>");

                return false;
            }
            else {
                $('#error').html("");
            }
        });

        return isValidSelection;


    });
    });

私のjavascript/jqueryはせいぜい初歩的なものであるため、ヘルプやポインタは大歓迎です。

ありがとう。

4

1 に答える 1