Нужна волшебная замена jQuery для элемента формы выпадающего списка Selectbox

Question

Я застрял в проблеме, и, после нескольких дней поиска решения, я обращаюсь к Stack Overflow за помощью.

Я пытаюсь заменить стандартный элемент формы <select> раскрывающимся списком на текстовое поле и элемент Div, содержащий неупорядоченный список. Я бы предпочел, чтобы решение основывалось на jQuery, но я открыт для альтернатив. Я нашел пару плагинов jQuery, которые почти делают то, что мне нужно, но достаточно далеки от того, чтобы быть реальным решением, которое мне нужно постоянно искать.

Вот изображение того, для чего я иду:

Мне бы хотелось, чтобы раскрывающийся список выглядел так, как показано на рисунке, и при выделении элемента (с помощью мыши или клавиатуры) только первая строка будет возвращена в текстовое поле (и не будет редактируемой). Я также хотел бы заполнить скрытое поле ввода значением, которое будет использоваться при отправке.

Я тяну свои волосы над этим. Буду признателен за любую помощь и руководство!

Редактировать: Может быть примечательно, что в бэкэнде опции раскрывающегося списка должны быть заполнены PHP / MySQL.

Answer 1

У jQuery UI есть лабораторное меню, которое вы можете использовать.Код не находится в окончательном выпуске, но даст вам кое-что для работы.

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

Answer 2

Если вы используете ASP.NET, попробуйте использовать DropDownExtender Ajax Toolkit

По сути, вы создаете метку («выпадающий список») и панель и прикрепляете панель к выпадающему списку через расширитель. Затем вы должны заполнить панель подробными выпадающими списками.

<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 для каждого элемента, который обновляет где-то на странице (скрытое поле, текстовое поле и т. Д.) Их выбранный выбор из выпадающего вниз список.