rkern
August 3, 2015, 4:22pm
1
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,
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,
CSS naming technically isn’t just limited to that.
http://codepen.io/ryanreese09/pen/waRRJx
(Unicode)
rkern
August 3, 2015, 5:10pm
6
@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.
function allItemsDisplay(thsVal){
$('#allItems').children().css('display','none');
$('#allItems').children('.' + thsVal).css('display','');
}
HTH,
rkern
August 3, 2015, 5:21pm
8
@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','');
}
system
Closed
November 3, 2015, 12:46am
11
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.