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

Question

我遇到了一个问题，在寻找解决方案似乎几天之后，我正在向 Stack Overflow 寻求帮助。

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

这是我想要的图片：

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).我还想使用将在提交时使用的值填充隐藏的输入字段。

我正在把头发拉到这个上面。任何帮助和指导将不胜感激！

编辑：值得注意的是，在后端，下拉选项将由 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 从下拉菜单中选择下列表。