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/