I wasn't able to find any plugins for creating nested Select elements (where a 2nd dropdown flies out when you mouseover an option in the parent element), so I'd like to create a function which would modify a nested menu from jQuery UI's menu widget to act as a nested dropdown. I'm using this in a form, and I
need to capture the users input the way a dropdown box does in a form.
I'm trying to create a
shortcut so the user can either select a value from "Drink" or from
"Coffee" without requiring extra steps on the part of the user or
taking up more screen space. If I were just creating regular dropdowns these would be set up as 5 Select element named Drinks, Coffee, Tea, Soft Drinks and Water, but in this situation I want to display
<select name="Drinks"> and when you mouseover
<select name="Drinks"><option value="Coffee"> then
<select name="Coffee"> flies out of
<select name="Drinks">,
<select name="Tea"> flies out when you mouseover
<select name="Drinks"><option value="Tea">, etc.
I understand that this can be done by calling an object's innerHTML to create a value for the object, but I haven't been able to figure out how to do it. Something along the lines of:
- <li onclick="drink(this)">Coffee</li>
- function drink(obj) {
value = obj.innerHTML();
}
This is an example of what I would like to convert, but instead of this being displayed as a nested menu (which you can see at
http://click2fit.com/flyout_menu2.html) I would like to create a dropdown with 4 selectable options (Coffee, Tea, Soft Drinks, Water), and each of those options has a nested Select element (the options for Coffee are Americano, Latte, etc.).
<ul id="drinks">
<li>
<a href="#">Drinks</a>
<ul>
<li>
<a href="#">Coffee</a>
<ul>
<li><a href="#">Americano</a></li>
<li><a href="#">Latte</a></li>
<li><a href="#">Cappuchino</a></li>
<li><a href="#">Espresso</a></li>
<li><a href="#">Iced</a></li>
</ul>
</li>
<li><a href="#">Tea</a>
<!-- Nested Tea Menu --!>
</li>
<li><a href="#">Soft Drinks</a>
<!-- Nested Soft Drinks Menu --!>
</li>
<li><a href="#">Water</a>
<!-- Nested Water Menu --!>
</li>
</ul>
</li>