Question

Basically I’m in over my head with this as my knowledge of jQuery is limited. I have a select menu list and depending on the manufacturer you choose those models will be shown with jQuery. The problem is I can’t figure out how to show all models if someone selects “All”. If someone could help me I would appreciate it, right now if you select “all” nothing shows. Also, is this a good way to go about this? Thank you.

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

Or code below:

<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>

And the 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

You just need to check the value of the selected item and show all of them if it is == ‘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());
            }
    });

});​