谷歌下拉列表（选择-> 选项）[关闭]答案

【问题标题】：Google dropdownlist (select -> option) [closed]谷歌下拉列表（选择-> 选项）[关闭]
【发布时间】：2012-03-20 10:02:45
【问题描述】：

如何制作这样的选择选项元素？

【问题讨论】：

你应该尝试检查代码，看看谷歌是如何做到的。如果你有一个工作样本，那么最好的学习方式就是调查。
请不要问这种“为我写代码”类型的问题。指定您面临的确切问题。单击按钮时是否显示项目列表？与定位项目列表？单击项目时更新按钮？向我们展示您迄今为止所做的尝试，以及您遇到的问题。

标签： javascript html web

【解决方案1】：

这不是 select 元素。

这将是 div 或类似的东西，当单击按钮时会出现在适当的位置。

要获得这种效果，请使用 CSS 定位元素，然后使用一些 javascript/jQuery，例如：

$(".button").click(function(){
   $(".popup").toggle();
});

【讨论】：

【解决方案2】：

您应该亲自调查一下，尤其是当您面前有像 google 这样的工作示例时。

如果没有，那么这篇文章会帮助你：

http://theodin.co.uk/blog/jquery/fancy-select-options-jquery-css3.html

它对如何使用 jQuery 创建精美的选择有完整的详细说明。

始终记住要优雅地失败，否则您的网站对于设置不正确的人来说毫无用处。因此，使用常规选择选项创建您的 html，这样代码就可以正常使用上面的类（比如“fancySelect”）。然后在 jQuery 中，您使用“fancySelect”选择所有项目并应用创建这个新的花式选择所需的更改。例如，将选项解析为样式正确的 div，并应用上面链接中详述的 javascript。

【讨论】：