drop down menu - using Jquery to controll two dropdown lists (pre-populated) -

i'm having issues two-list dropdown-chooser. tried arrange select-options, ran major problems when tried dynamically hide options.

another benefit using ul-li can style more cross-browser friendly , easier (as understand other stackoverflow-questions).

other solutions have found require form of loading, such ajax, populate second list, not option here whole list pre-loaded. classes , other attributes can added/removed.

<ul>     <li>volvo</li>     <li>audi</li>     <li>bmw</li>     <li>ford</li>     <li>jeep</li> </ul>  <ul>     <li>[choose brand first]</li> <!-- visible if nothing chosen in 1st -->     <li>[choose model]</li> <!-- visible brands -->     <li class="volvo">s80</li>     <li class="volvo">v70</li>     <li class="volvo">xc90</li>     <li class="audi">a8</li>     <li class="audi">a6</li>     <li class="audi">a4</li>     <li class="bmw">x1</li>     <li class="bmw">m6</li>     <li class="ford">fiesta</li>     <li class="ford">fiesta</li>     <li class="ford">mustang</li>     <li class="ford">explorer</li>     <li class="jeep">wrangler</li>     <li class="jeep">cherokee</li>   </ul> 

what want is:

1. for 2 lists behave similar 2 dropdown-list (select-option). tried few solutions single list, never able work when using 2 lists on same page.. (for example this: http://jsfiddle.net/a6njk/202/)
2. for options in second list specific class shown based on first list-option

for example:

• if no choice made in first list, no car models shown in second list
• if 'volvo' chosen in first list, car models class volvo shown in second list

if convenient, greatful jsfiddle solution.

thanks beforehand

i think trick pretty well: http://jsfiddle.net/a6njk/221/ won't code optimized best works on latest browsers (safari, opera, chrome, firefox, internet explorer 10, 9, , 8,7 [in quirks mode]). is:

• show second ul when option in first 1 selected
• re-display [select] in second ul when value changed in first one
• only display values in second ul when li data-value of first ul equals classes of li's in second ul.

i put whole function code in variable called afterwards.

basically, have do, change 2 handlers ( thisdropdown, nextdropdown ) ul id's on page.

i hope helped you!