jquery - 自定义选择菜单，jQuery 不工作

Question

我正在尝试通过制作自定义菜单来复制标准选择菜单的功能。

问题是我不能让它表现得像一个选择菜单。我的目标是能够在单击列表项时替换“选定”文本。每当用户在菜单外单击时，我也试图关闭菜单。

这是我的 JS Fiddle 的链接：

http://jsfiddle.net/dg7Lc/9/

我感谢任何见解！谢谢！

-D

Answer 1

至于修复您的代码，您需要更改$('.selected').appendTo('.custom-select span');为$('.custom-select span').html($('.custom-select ul li.selected').html());

http://jsfiddle.net/dg7Lc/13/

选择列表的问题在于它们由浏览器/操作系统设置样式，并且在按选项卡和按下其他键时有几个 onclick/onblur 动作和复杂动作。

话虽如此，您可能想研究一个 jquery 选择框插件。我强烈推荐https://github.com/fnagel/jquery-ui，因为我发现它是跨浏览器最一致的，同时仍然完全像一个选择框。

他们的代码很复杂（就像在显示的选择框后面有一个隐藏的选择框），但这都是必要的。根据我的个人经验，这个插件很容易设计和定制。