需要Magic jQuery替换选择框下拉表单元素

Question

我遇到了问题，在寻找解决方案的日子之后，我正在寻求Stack Overflow的帮助。

我正在尝试使用Textbox和包含无序列表的Div替换标准<select>下拉表单元素。我希望解决方案基于jQuery，但我愿意接受替代方案。我发现了几个几乎做我需要的jQuery插件，但远远不够我需要继续寻找真正的解决方案。

这是我想要的形象：

我希望下拉列表看起来如图所示，当选择一个元素（使用鼠标或键盘）时，只需将第一行传回文本框（并且不可编辑）。我还想填充一个隐藏的输入字段，其值将用于提交。

我把头发拉过这一头。任何帮助和指导将非常感谢！

编辑：值得注意的是，在后端，下拉选项将由PHP / MySQL填充。

Answer 1

jQuery UI在实验室中有一个您可以使用的选择菜单。代码不在最终版本中，但会给你一些工作。

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

Answer 2

如果您使用的是ASP.NET，请尝试使用Ajax Toolkit's DropDownExtender

基本上，您创建了一个标签（“下拉列表”）和一个面板，并通过扩展程序将面板附加到下拉列表中。然后，您将使用详细的下拉列表项填充该面板。

<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>

在后面的代码中，您将为每个下拉项添加控件到面板，然后在每个项目上点击javascript，更新页面上的某个位置（隐藏字段，文本框，等等）他们从下拉列表中选择的选项下面列表。