突出顯示一組下拉列表中的重複選擇

Question

我有一組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是簡陋充其量。

謝謝。

Answer 1

這是一個基本的解決方案，希望能指引您朝着正確的方向發展。

**注意：當您進行沒有任何重複的更改時，這將清除所有「突出顯示的」下拉列表。

$.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的CSS樣式。