jquery - 使用选择更改内容，但能够使用 jQuery 显示所有内容

Question

基本上我对此感到困惑，因为我对 jQuery 的了解有限。我有一个选择菜单列表，根据您选择的制造商，这些模型将使用 jQuery 显示。问题是如果有人选择“全部”，我无法弄清楚如何显示所有模型。如果有人可以帮助我，我将不胜感激，如果您现在选择“全部”，则没有任何显示。另外，这是解决这个问题的好方法吗？谢谢你。

http://jsfiddle.net/KAjb7/1/

或以下代码：

<select class="manufacturers">
<option class="selected" value="all">All</option>
<option value="motorola">Motorola</option>
<option value="htc">HTC</option>
<option value="lg">LG</option>
<option value="samsung">Samsung</option>
<option value="kyocera">Kyocera</option>
</select>


<div class="scroll-content">
  <ul class="manulist motorola">
    <li><a href="#">Motorola Triumph</a></li>
  </ul>
 <ul class="manulist htc">
   <li><a href="#">HTC WILDFIRE S</a></li>
  </ul>
  <ul class="manulist lg">
<li><a href="#">LG Optimus Slider</a></li>
<li><a href="#">LG Optimus V</a></li>
<li><a href="#">LG Rumor Touch</a></li>
<li><a href="#">LG Rumor 2</a></li>
<li><a href="#">LG 101</a></li>
  </ul>
</div>

和 jQuery：

$(document).ready(function(){

$('.manufacturers').change(function(){
var selected = $(this).find(':selected');
$('ul.manulist').hide();

$('.'+selected.val()).show();
$('.optionvalue').html(selected.html()).
   attr('class', 'optionvalue '+selected.val());
});

});​

Answer 1

您只需要检查所选项目的值，如果它是 == 'all'，则显示所有这些值。

http://jsfiddle.net/lucuma/WnapS/

$(document).ready(function(){

    $('.manufacturers').change(function(){
    var selected = $(this).find(':selected');
    $('ul.manulist').hide();
        if ($(this).val() == 'all') {
            $('.scroll-content ul').show();
        } else {
    $('.'+selected.val()).show();
    $('.optionvalue').html(selected.html()).
       attr('class', 'optionvalue '+selected.val());
            }
    });

});​

Answer 2

尝试这个：

    if ($(this).val() == 'all') {
       $('.manulist').show()
    }    

http://jsfiddle.net/KAjb7/2/

Answer 3

3个选项：

1. 将类“all”添加到所有 ul 的

2. 改变

   <option class="selected" value="all">All</option>
   

   至

   <option class="selected" value="manulist">All</option>
   

3. 添加如果

   if (selected.val() == 'all') {
       $('.manulist').show();
   } else {
       $('.'+selected.val()).show();
   }
   

Answer 4

$(文档).ready(函数(){

$('.manufacturers').change(function(){
    var selected = $(this).find(':selected');

    if ( selected.val() == "all") {
        // console.log("all");
        $('ul.manulist').show();
        } else {
            $('ul.manulist').hide();

    $('.'+selected.val()).show();
    $('.optionvalue').html(selected.html()).
    attr('class', 'optionvalue '+selected.val());
            }

});

});