2

我被困在我认为应该很容易的事情上......我有一个选择，可以在更改时获取 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();

         });
         }
        }); 
    });
4

2 回答 2

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/

于 2012-05-27T00:00:26.273 回答
0

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();
   });
 });
于 2012-05-27T00:02:21.723 回答