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 compatible 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 (li
s). Then we map an anonymous function (could be named too) to the select
s 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.