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

0

这是一个基本解决方案，有望为您指明正确的方向。

**注意：当您进行没有任何重复的更改时，这将清除所有“突出显示”的下拉列表。

$.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>");

            $(item).addClass('highlighted') //Add the 'highlighted' class to the duplicate selection and original
            $(instance).addClass('highlighted');
            $(item).parent().append("<span>*</span>")  //Append the "*" to the parent element which is <p>
            $(instance).parent().append("<span>*</span>") //Append the "*" to the parent element which is <p>

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

            //Remove the class, and remove the <span>*</span>
            $(item).removeClass('highlighted');
            $(instance).removeClass('highlighted');
            $("span", $(item).parent()).remove();
            $("span", $(instance).parent()).remove();

        }
    });

然后你只需要为highlighted.

于 2013-10-10T16:26:26.277 回答