Question

我坚持认为应该很容易的事情......我有一个选择，在变化时获取id值并且想要隐藏所有并显示具有相同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值的数字，也不会反复使用相同的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/

Answer 2

Id字段应该是唯一的，并且在从DOM对象访问时会导致问题。请尝试使用类字段。

<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();
   });
 });

jquery隐藏显示列表元素与选择

2 个答案: