Javascript 突出显示一组下拉列表中的重复选择

我有一组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;


    });
    });

$（函数（）{
$（'select'，$（'#'）[0]）。更改（函数（）{
var实例=这个；
var isValidSelection=true；
var$otherDropdowns=$（'select'，$（'#'）[0]）。而不是（$（this））；
$。每个（$其他下拉列表，函数（i，项）{
if（instance.value==item.value）{
isValidSelection=false；
$（'#error'）.html（“您选择了一个重复选项”）；
返回false；
}
否则{
$（'#error'）.html（“”）；
}
});
返回是有效的选择；
});
});

我非常感谢任何帮助或指点，因为我的javascript/jquery充其量只是初级的

---

谢谢。

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

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

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

        }
    });

$。每个（$other下拉列表，函数（i，项）{
if（instance.value==item.value）{
isValidSelection=false；
$（'#error'）.html（“您选择了一个重复选项”）；
$（item）.addClass（'highlighted'）//将'highlighted'类添加到重复选择和原始选择中
$（实例）.addClass（'突出显示'）；
$（item）.parent（）.append（“*”/）将“*”追加到
$（instance）.parent（）.append（“*”/）将“*”追加到
返回false；
}
否则{
$（'#error'）.html（“”）；
//删除类，然后删除*
$（项）.removeClass（'突出显示'）；
$（实例）.removeClass（'突出显示'）；
$（“span”，$（item.parent（））.remove（）；
$（“span”，$（instance.parent（））.remove（）；
}
});

---

然后你只需要为突出显示的

创建一个CSS样式

，非常感谢Bryan。这对我来说很有效，需要一些微调，但这给了我一个需要的开始。当它出现在你面前时，我想我让它在我的脑海里变得比实际更复杂。谢谢