Show & hide elements in an unordered list based on selection

HI,
I have done a lot of looking & haven’t found an answer to my problem … lots of similar ones, yes, but I have been unable to apply them to my need.

I have a select list of categories and an unordered list of items with those categories assigned to classes. I want to only show items in the Unordered list with the selected category & hide all of the others when you use the select list.

For example, from the html below, if I select “Cat2” I only want the items from the list with the “Cat2” class to show.

my HTML looks like this:

<select onchange="">
     <option value="Cat1">Category 1</option> 
     <option value="Cat2">Category 2</option>
     <option value="Cat3">Category 3</option> 
 </select>

 
 <ul id="allItems">
     <li id="1" class="Cat1">Item 1</li>
     <li id="2" class="Cat1">Item 2</li>
     <li id="3" class="Cat2" style="display:none;">C2Item 1</li>
     <li id="4" class="Cat2" style="display:none;">C2Item 2</li>
     <li id="5" class="Cat3" style="display:none;">C3Item 1</li>
 </ul>

Any help on where to look would be appreciated.

Just curious; are you using jQuery? If you are, this becomes very simple. If not, I’ve heard that trying to access elements by class name isn’t very cross-browser friendly.

V/r,

:slight_smile:

Yes. I am using jQuery.

Thanks.
R

Cool! (BTW… you should change the IDs of your LI elements - IDs must begin with a letter or underscore.)

<select onchange="allItemsDisplay(this.value);">
     <option value="Cat1">Category 1</option> 
     <option value="Cat2">Category 2</option>
     <option value="Cat3">Category 3</option> 
 </select>


 <ul id="allItems">
     <li id="1" class="Cat1">Item 1</li>
     <li id="2" class="Cat1">Item 2</li>
     <li id="3" class="Cat2" style="display:none;">C2Item 1</li>
     <li id="4" class="Cat2" style="display:none;">C2Item 2</li>
     <li id="5" class="Cat3" style="display:none;">C3Item 1</li>
 </ul>

<script type="text/javascript">
function allItemsDisplay(thsVal){
  var $theseLI = $('#allItems').children();
  $theseLI.css('display','none');
  $theseLI.find('.' + thsVal).css('display','');
}
</script>

I haven’t time to test this, but it should work.

HTH,

:slight_smile:

CSS naming technically isn’t just limited to that.
http://codepen.io/ryanreese09/pen/waRRJx
(Unicode)

@RyanReese @WolfShade Thanks for the tip on ID’s…

@WolfShade The code almost worked… it hides the LI’s, it just doesn’t display the appropriate selected set of LI’s

I’ll look through & see if I can figure it out…

Thanks.
R

Finally got it to work. :smile:

function allItemsDisplay(thsVal){
  $('#allItems').children().css('display','none');
  $('#allItems').children('.' + thsVal).css('display','');
}

HTH,

:slight_smile:

@WolfShade
Beautiful… thank you very much…

Russ

We can also expand on this, so that you can use it for more than one instance of UL/LI.

function allItemsDisplay(thsElem,thsVal){
  $('#' + thsElem).children().css('display','none');
  $('#' + thsElem).children('.' + thsVal).css('display','');
}

@WolfShade Thats great.

Thank you.
Russ

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.