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/