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 に答える