Question

客户给了我一项我以前没做过的任务，所以我正在寻找最好的方法。他们有一个他们希望用户填写的表单，但对于一个字段，他们希望将数千个选项放入三个下拉菜单中。

例如：

enter image description here

因此，一旦他们选择了一个城市，用户将只能选择一个城市，一旦他们选择了一个城市，他们就只能选择一个城市。（打破成千上万选项的好方法。）

我想我可以很容易地使用POSTBACK和一个简单的数据库，但我想用AJAX和一个简单的数据库做一些事情就是更灵活的解决方案。

还有其他方法可以解决这个问题吗？如果没有，是否有人可以获得我可以获取的教程或代码片段的链接？其次，你认为实施这样一个系统需要多长时间？你？

我之前从未这样做过，所以我希望避免尽可能多的无法预料的陷阱。感谢。

Answer 1

简单的jQuery Autocomplete解决方案怎么样？

Answer 2

我做过这样的事情，还有成千上万的条目。问题：

如果有数百个城市可供选择，最终用户很难通过列表进行导航
下拉，因为它们对这些事情很糟糕
查询数据库以获取信息是有压力的，因为查询基本相同，结果相同，几乎从不改变。

所以解决方案：

我仍然支持下拉列表，但我添加了（通过UI）选项供用户过滤列表。我不会发布代码或布局，如果您对下拉列表一样好 - 保留它们。
我曾经通过JS加载了所有的国家，城市和地区。现在，为什么 - 首先，它不是那么大的交易，如果我没有弄错的话，大约是20千字节的gzipped。我不想要“请选择一个国家”＆gt; “请稍等，加载城市”＆gt; “选择一个城市”＆gt; “请稍等，加载区域”＆gt; “选择一个区域”的事情，我绝对讨厌等待所以我不希望任何人等待，如果他们没有:) 因此，整个结构立即加载（当请求页面时）并保存在对象内。如果浏览器支持sessionStorage，我首先检查是否有对象 - 如果没有，我通过jQuery的$ .ajax调用加载它。在Web服务器上，返回JSON对象的脚本实际上从Memcache加载数据。如果Memcache中没有条目，那么我查询数据库并加载所有数据，然后将其与Memcache一起存储以供以后使用。

现在，所发生的事情是我有一个代表所有国家，城市和地区的JS对象 - 具有关系，这意味着我可以以任何方式呈现下拉列表，仅显示当前国家/地区选择的相关城市。 / p>

现在，由于你有类似的结构 - 你可以应用相同的逻辑。在页面加载时加载项目，但检查您是否有sessionStorage可用。如果是，请检查您是否有对象。没有？执行$ .ajax调用并获取它。当下拉列表触发change事件时，请呈现相应的数据。

希望这有点帮助，我正急着打字：）

Answer 3

一些回复：

这个很好地利用了AJAX，无需寻找其他方法。您不希望强制客户端为可能的州/市/剧院组合预加载所有javascript数组...
jQuery Autocomplete是用于实现UI的好工具
可以从GeoNames
实施需要多长时间取决于实施者的技能;）

Answer 4

一些有效的例子：http://jsfiddle.net/rA9gU/36/

希望这可能会有所帮助

更新：添加了您附近的NO影院选项

http://jsfiddle.net/rA9gU/39/

Answer 5

你已经知道了。在每个下拉列表的“on change”事件中，为下一个下拉列表的选项运行AJAX请求。

使用jQuery非常简单。

$(document).ready(function () {
    $("#state").change(function () {
        // AJAX call w/ $.get or $.post to a script to return and set city options
    });    

    // Same for city to retrieve cinema options
    ....
});

jQuery绝不是一个要求 - 只是以跨浏览器的方式很好地包装好。

如果您愿意，请尽快提供更具体的示例。

多个下拉菜单中的数千项

5 个答案: