如何制作一个可以作为文本框使用的“混合”HTML下拉列表?

时间:2010-10-14 17:36:29

标签: javascript jquery html ajax drop-down-menu

对于我的网站,我需要让用户进入他们的城市。

我想使用2下拉列表:“状态”和“城市”下拉列表。 “城市”列表中的选项取决于选择的“州”。

但是,必然会出现用户的“城市”不在下拉列表中的情况。为了处理这些情况,我希望“城市”输入是“混合”:用户可以从下拉列表中选择一个选项,他们也可以将输入用作文本框,只需输入他们的城市名称即可。

我想到的一个例子是谷歌地图。在Google地图中输入任意地址。然后单击左侧面板上的“方向”。然后单击“通过公共交通”图标(左起第二个图标)。最正确的下拉框就是我所说的。您可以从下拉列表中选择“下午1:00”,“下午1:30”,“下午2:00”等选项。但你也可以在盒子里输入“1:23 pm”之类的时间。

我该怎么办?是否有任何javascript库/框架可以做到这一点?我目前正在使用jQuery。

3 个答案:

答案 0 :(得分:1)

如果您在GMaps路线页面上查看您所指的来源,您可以看到他们是如何做到的; “下拉”按钮实际上只是一个图像。当从下拉列表中进行选择时,该值将被放入文本框中。

答案 1 :(得分:1)

有许多JavaScript示例,使用JQuery或本机JS。它们通常被称为组合框 - 因为它们能够从下拉列表或接受类型条目中进行选择 - 其中大多数包括启用自由格式条目的设置与仅从列表中强制选择。我没有任何特定类型的经验,所以我不会提出建议,但如果你谷歌“javascript组合框”,那将“让你开始正确的方向:”

答案 2 :(得分:1)

我发现可能涉及的一些解决方案:

所以你可能会考虑"选择标记支持"一个很好的词组合,可以在谷歌搜索。