I want to know how to access each li within the ul? I am not sure exactly what the name of the ul is.
Here is the code:
<ul class= "selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown" style>
<li class = " omitted">
more li here omitted
</ul>
My main goal is to have a user click a size in a dropdown lets say size 8 and it will automatically detect that specific li(8) inside the ul
I want to know how to access each li within the ul? I am not sure exactly what the name of the ul is.
Here is the code:
<ul class= "selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown" style>
<li class = " omitted">
more li here omitted
</ul>
My main goal is to have a user click a size in a dropdown lets say size 8 and it will automatically detect that specific li(8) inside the ul
Share Improve this question edited Aug 1, 2013 at 0:01 TheProgrammer asked Jul 31, 2013 at 23:40 TheProgrammerTheProgrammer 1,3445 gold badges24 silver badges49 bronze badges 8- 1 where is the code ?? I dont see it... – mohkhan Commented Jul 31, 2013 at 23:41
- You want a jQuery solution or not? – Brilliand Commented Jul 31, 2013 at 23:42
-
ul li? Why doesn't that work? – Cody Guldner Commented Jul 31, 2013 at 23:42 - @mohkhan should be updated now – TheProgrammer Commented Jul 31, 2013 at 23:43
- @Brilliand Yes jQuery – TheProgrammer Commented Jul 31, 2013 at 23:44
6 Answers
Reset to default 3You could use querySelectorAll:
var array_of_li = document.querySelectorAll("ul.selectBox-options li");
If you're not sure that the ul will have the selectBox-options class, then delete the .selectBox-options part - but remember that it will get you every li on the page then.
If you're using jQuery, then this is a bit more patible, and does basically the same thing:
var li = $("ul.selectBox-options li");
If you accept jQuery, like you mentioned:
$( "li" ).each(function( index ) {
console.log( index + ": " + $(this).text() );
});
As the jQuery documentation declares.
I'm not sure how to do it with raw javascript though :)
in CSS:
li { color:black; }
with ul:
ul li { }
or with class:
ul li.ommitted { }
or with ul&li class
ul.selectBox-options li.ommitted { }
ps. Don't forget the end tag
</li>
<html>
<head>
<style type='text/css'>
.omitted {
color: rgb(0, 0, 0);
background: transparent;
}
.selected {
color: rgb(255, 255, 255);
background: rgb(0, 0, 0);
}
</style>
<script type='text/javascript'>
function matchSelected(foo) {
var selectBox = document.getElementById('selectBox');
var items = selectBox.getElementsByTagName('LI');
for(i=0; i<items.length; i++) {
items[i].className = items[i].innerHTML == foo ? 'selected' : 'ommitted';
}
}
</script>
</head>
<body>
<ul id='selectBox' class='selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown'>
<li class='omitted'>1</li>
<li class='omitted'>3</li>
<li class='omitted'>8</li>
<li class='omitted'>10</li>
<li class='omitted'>14</li>
</ul>
<select onChange='matchSelected(this.value);'>
<option value='1'>One</option>
<option value='3'>Three</option>
<option value='8'>Eight</option>
<option value='10'>Ten</option>
<option value='14'>Fourteen</option>
</select>
</body>
</html>
You want like this? DEMO http://jsfiddle/yeyene/ZjHay/
$(document).ready(function(){
$('select').on('change',function(){
alert($('.selectBox-options li').eq($(this).val()-1).text());
});
});
If the select and the ul are siblings inside the same parent element (a div for instance), you can use querySelector and querySelectorAll to select the proper ul element and its children.
HTML
<div id="container">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
JavaScript
var select = document.querySelector( "#container > select" );
var ul_children = ul_list.querySelectorAll( "#container > select ~ ul > li" );
var selected_li = undefined; // Undefined for now, see below for setting its value.
// If we got results for both select and ul_children.
if ( select !== null && ul_children.length > 0 )
{
// Map function to the select's "change" event to pick a correct list item.
select.addEventListener( "change", function( event )
{
// Get the select's value after changing the option.
var selected = select.value;
// Decrement with 1 to fix offset (ul_children starts from 0).
selected--;
// use the select's value to choose the right list item from the li collection.
selected_li = ul_children.childNodes[ selected ];
});
}
(Above code is probably not cross-browser patible out of the box, remember to use working code.)
In the above code, we first get the select element and the ul's child elements (lis). Then we map an anonymous function (could be named too) to the selects change event (which is triggered each time an option is chosen with it). This function then selects the proper li item from the item collection we fetched in line two and assign it to a variable called selected_li.
Now you can manipulate and use the selected_li however you want.
EDIT: with jQuery this job is probably a bit easier.