Need Magic jQuery Replacement for Selectbox Dropdown Form Element. Thank you!

Question

Hello!

I'm stuck on a problem and, after what seems like days of searching for a solution, I'm reaching out to Stack Overflow for help.

I'm trying to replace a standard dropdown form element with a Textbox and a Div containing an unordered list. I'd prefer to have the solution be based on jQuery, but am open to alternatives. I've found a couple jQuery plugins that -almost- do what I need, but are far enough from being a real solution that I need to keep looking.

Here's an image of what I'm going for:

I'd like the dropdown to look as pictured, and when an element is selected (with mouse or keyboard), have just the first line handed back into the textbox (and not be editable). I'd also like to populate a hidden input field with a value that will be used on Submit.

I'm pulling my hair out over this one. Any help and guidance will be most appreciated!

Thanks!

~PF

Edit: It may be noteworthy that, on the backend, the dropdown options are to be populated by PHP / MySQL.

Answer 1

If you're using ASP.NET, then try using the Ajax Toolkit's DropDownExtender

Basically, you creat a label (the "dropdownlist") and a panel, and attach the panel to the dropdownlist via the extender. You'd then populate the panel with your detailed dropdownlist items.

<asp:Label runat="server" ID="ddl_Test" Text="Please Select an Article."/>
<ajaxToolkit:DropDownExtender runat="server" ID="dde_Test" TargetControlID="ddl_Remit" DropDownControlID="pnl_TestDropDown" />
<asp:Panel runat="server" ID="pnl_TestDropDown"  Style="display:none; visibility: hidden;">
</asp:Panel>

And in the code behind you would add controls to your panel for each drop down item, then have a javascript on click for each item that updates somewhere on the page (hidden field, textbox, whatever) their selected choice from the drop down list.

Answer 2

jQuery UI has a selectmenu in the labs that you might be able to use. The code isn't in a final release but would give you something to work with.

http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html