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

您只需检查所选项目的值，如果是=='全部'则显示所有项目的值。

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个选项：

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

更改

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

到

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

添加时间

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

Answer 4

（文档）$。就绪（函数（）{

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

});

}）;

使用select更改内容但能够使用jQuery显示所有内容

4 个答案: