드롭 다운 선택 변경

Question

내 페이지의 기능을 변경하지만 분명히 작동하지 않는 드롭 다운이 있습니다. 나는 사용자가지도를 업데이트하고 아래 범례를 업데이 트 해야하는 산업을 선택하면 드롭 다운 선택에 관한지도가 있습니다. 전설이 업데이트되지 않습니다

내가 잘못하고있는 것을 지적하십시오.

는

<select id="lstMap1Occ"> 
    <option value="1">Engineers </option> 
    <option value="2">Chemical Engineers</option> 
</select> 

(예 종료를 선택 태그가 좀 이상한 이유에서 붙여 넣기하지 IST이다가) 여기

$("#lstMap1Occ").change(function() { 
     var index = $(this).children(":selected").index(); 
     $("#legend").children().hide().eq(index).show(); 
    }); 

이 드롭 다운 당신에게

JS 감사

HTML

<div class="legend"> 
<div class="engineers"> 
    <ul> 
     <li style="background-color:rgb(254,240,217);">0-345</li> 
     <li style="background-color:rgb(253,212,158);">346-503</li> 
     <li style="background-color:rgb(253,187,132);">504-1240</li> 
     <li style="background-color:rgb(252,141,89);">1241-1679</li> 
     <li style="background-color:rgb(239,101,72);">1680-2625</li> 
     <li style="background-color:rgb(215,48,31);">2627-4789</li> 
    </ul> 
</div> 
<div class="chemical"> 
    <ul> 
     <li style="background-color:rgb(254,240,217);">0-13</li> 
     <li style="background-color:rgb(253,212,158);">14-24</li> 
     <li style="background-color:rgb(253,187,132);">25-37</li> 
     <li style="background-color:rgb(252,141,89);">38-56</li> 
     <li style="background-color:rgb(239,101,72);">57-112</li> 
     <li style="background-color:rgb(215,48,31);">113-168</li> 
    </ul> 
</div> 

Answer 1

는 (". 전설") http://jsfiddle.net/fy6hf/1/

$("#lstMap1Occ").change(function() { 
     var index = $(this).children(":selected").index(); 
     $(".legend").children().hide().eq(index).show(); 
    });