jQuery：在多個Select語句中突出顯示選項

Question

我的頁面上有多個Select語句，選項基本相同，如下所示。我試圖做的是在所有選擇語句選中後突出顯示每個選項。即如果您在第一個選擇中選擇「1」，它將在所有選擇語句中高亮顯示。

我以爲我和下面的代碼非常接近，但它似乎只在我第一次做出選擇時才起作用。一旦使用了所有選項，最終結果將是所有選項都用灰色背景突出顯示。

我正在使用jQuery 1.5。

.pick { background-color: #CCC; } 

<table> 
    <tr> 
     <td>Drop down 1</td> 
     <td><select id="dd1" name="dd1"> 
       <option value=""></option> 
       <option value="1"> 1 </option> 
       <option value="2"> 2 </option> 
       <option value="3"> 3 </option> 
       <option value="4"> 4 </option> 
       <option value="5"> 5 </option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td>Drop down 2</td> 
     <td><select id="dd2" name="dd2"> 
       <option value=""></option> 
       <option value="1"> 1 </option> 
       <option value="2"> 2 </option> 
       <option value="3"> 3 </option> 
       <option value="4"> 4 </option> 
       <option value="5"> 5 </option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td>Drop down 3</td> 
     <td><select id="dd3" name="dd3"> 
       <option value=""></option> 
       <option value="1"> 1 </option> 
       <option value="2"> 2 </option> 
       <option value="3"> 3 </option> 
       <option value="4"> 4 </option> 
       <option value="5"> 5 </option> 
      </select> 
     </td> 
    </tr> 
</table> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("select[name*='dd']").change(onSelectChangeDD); 
    }); 

    function onSelectChangeDD() { 
     var selected = $("select[name*='dd'] option:selected"); 
     var test = $(this).val(); 

     $("select[name*='dd']").children().each(function() { 
      // remove all the highlights 
      $(this).removeClass("pick"); 
     }); 

     $("select[name*='dd']").children().each(function() { 

      // highlight the selections 
      if ($(this).val() == test) { 
       $(this).addClass('pick'); 
      } 
     }); 

    } 
</script> 

Answer 1

最終結果一旦 已被用於將所有的 選項與灰色 背景突出的所有選項。

在這種情況下，你應該刪除unpicks所有項目代碼：

$("select[name*='dd']").children().each(function() { 
    // remove all the highlights 
    $(this).removeClass("pick"); 
}); 

，並與代碼unpicks只非選擇項目替換爲：

$("select[name*='dd']").children().each(function() { 
    // remove unused highlights 
    if ($("select[name*='dd'] option:selected") 
     .filter("[value='" + $(this).attr('value') + "']") 
     .length === 0) { 
     $(this).removeClass("pick"); 
    } 
}); 

鏈接jsfiddle code。

Answer 2

$(document).ready(function() { 
     //i used another selector and add "dd" class name to all select 
     $("select.dd").change(function(){ 
     $("select.dd").children().removeClass("pick"); 
     $("select.dd").children('option[value="'+$(this).val()+'"]').addClass("pick"); 
     }); 
}); 

你可以在這裏嘗試http://jsfiddle.net/R9JCd/1/