Besoin de remplacer jQuery Magic pour Selectbox Dropdown Formulaire élément

Question

Je suis bloqué sur un problème et, après ce qui semble être des jours de recherche d'une solution, je suis à Stack Overflow pour obtenir de l'aide.

Je tente de remplacer un élément de formulaire déroulant standard <select> avec une zone de texte et une div contenant une liste non ordonnée. Je préférerais que la solution soit basée sur jQuery, mais je suis ouvert aux alternatives. J'ai trouvé un couple de plugins jQuery que presque faire ce dont j'ai besoin, mais sont assez loin d'être une vraie solution que je dois continuer à chercher.

est ici une image de ce que je vais pour:

Je voudrais le menu déroulant à regarder comme sur la photo, et quand un élément est sélectionné (avec la souris ou le clavier), viennent la première ligne restituée dans la zone de texte (et ne pas être éditable). Je voudrais également remplir un champ de saisie masqué avec une valeur qui sera utilisée sur Envoyer. Je tire mes cheveux par dessus celui-ci. Toute aide et conseil sera le plus apprécié!

Edit: Il est à noter que, sur le backend, les options de liste déroulante doivent être remplies par PHP/MySQL.

Answer 1

jQuery UI dispose d'un menu de sélection dans les laboratoires que vous pourriez utiliser. Le code n'est pas dans une version finale mais vous donnerait quelque chose à travailler avec.

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

Answer 2

Si vous utilisez ASP.NET, puis essayez d'utiliser le Ajax Toolkit's DropDownExtender

Fondamentalement, vous creat une étiquette (le « dropdownlist ») et un panneau, et fixer le panneau au dropdownlist grâce à l'extension. Vous remplissez alors le panneau avec vos éléments détaillés de liste déroulante.

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

Et dans le code derrière vous ajouter des contrôles à votre panneau pour chaque menu déroulant élément, puis ont un javascript sur un clic pour chaque élément qui met à jour quelque part sur la page (champ caché, zone de texte, quelle que soit) leur sélectionné choix dans la liste déroulante.