jQuery：複数のSelectステートメントのハイライトオプション

Question

私は自分のページに複数のSelectステートメントがあり、オプションはすべて基本的に以下のようなランキングシステムと同じです。私がしようとしているのは、選択されたすべての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/