jQuery的隱藏顯示列表元素與選擇

Question

我被困在我認爲應該很容易的東西...我有一個選擇，在變化獲取身份證的價值和即將隱藏所有和顯示那些用相同的id值 所以它與第一 工作只是任何幫助我，請

<select name="" id="estado_list"> 
<option value="0">-</option> 
<option value="1">Nuevo León</option> 
<option value="2">Puebla</option> 
</select> 


<ul style="list-style: none outside none;"> 
<li class="forli" id="1">data</li> 
<li class="forli" id="1">data</li> 
<li class="forli" id="1">data</li> 
<li class="forli" id="1">data</li> 
<li class="forli" id="1">data</li> 
<li class="forli" id="1">data</li> 
<li class="forli" id="2">data</li> 
</ul> 






$(document).ready(function(){ 
     $("#estado_list").change(function(){ 
     var id = $(this).val(); 

      if (id == 0){$('.forli').show();} 
     else{$('.forli').hide(); 
      $('li').each(function(){ 
      $('#'+ id).show(); 

     }); 
     } 
     }); 
    }); 

Answer 1

Id字段應該是唯一的，並且在從DOM對象訪問時會導致問題。嘗試使用class字段。

<select name="" id="estado_list"> 
<option value="list0">-</option> 
<option value="list1">Nuevo León</option> 
<option value="list2">Puebla</option> 
</select> 


<ul style="list-style: none outside none;"> 
<li class="forli list1">data</li> 
<li class="forli list1">data</li> 
<li class="forli list1">data</li> 
<li class="forli list1">data</li> 
<li class="forli list1">data</li> 
<li class="forli list1">data</li> 
<li class="forli list2">data</li> 
</ul> 


$(document).ready(function(){ 
    $("#estado_list").change(function(){ 
     $('.forli').hide().filter("."+$(this).val()).show(); 
    }); 
}); 

Answer 2

您應修改您的標記，以不使用號碼id值，以及不超過使用相同的id和過度。我會鼓勵你進一步利用階級的價值觀：

<select id="estado_list"> 
<option value="zero">-</option> 
<option value="one">Nuevo León</option> 
<option value="two">Puebla</option> 
</select> 

<ul> 
<li class="forli one">1</li> 
<li class="forli one">2</li> 
<li class="forli one">3</li> 
<li class="forli one">4</li> 
<li class="forli one">5</li> 
<li class="forli one">6</li> 
<li class="forli two">7</li> 
</ul>​ 

一旦你做到了這一點，您可以篩選結果，當你選擇的變化：

$("#estado_list").on("change", function(e){ 
    $("li.forli").each(function(){ 
     $(this).toggle($(this).hasClass(e.target.value)); 
    }); 
});​ 

演示：http://jsfiddle.net/JtFvK/1/