成千上万的项目在多个下拉菜单。

A client has given me a task to do that I've not done before, and so I'm looking for the best way to do it. They have a form they want users to fill in, but for one field, they want an option of thousands to be placed into three dropdown menus.

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

For example:

例如:

So a user will only be able to choose a Venue once they've chosen a City, only a City once they'd chosen a State. (A nice way to break up the thousands of options.)

因此，用户只有在选择了一个城市之后才能选择一个地点，只有在选择了一个州之后才能选择一个城市。(这是打破成千上万种选择的好方法。)

I suppose I could this quite easily using POSTBACKs and a simple database, but I imagine that doing something with AJAX and a simple database would be the slicker solution.

我认为使用回发和一个简单的数据库可以很容易地做到这一点，但是我认为使用AJAX和一个简单的数据库做一些事情将是一种更灵活的解决方案。

Are there any other ways that this problem might be tackled? If not, does anyone have any links to tutorials or code snippets I could grab? Secondly, how long do you think it would take you to implement such a system?

这个问题还有别的解决办法吗?如果没有，有人有任何链接到教程或代码片段我可以获取吗?第二，你认为实施这样一个系统需要多长时间?

I've never done this before so I'm hoping to avoid as many unforeseen pitfalls as possible. Thanks.

我以前从未这样做过，所以我希望尽可能地避免许多不可预见的陷阱。谢谢。

5 个解决方案

#1

How about a simple jQuery Autocomplete solution?

一个简单的jQuery自动完成解决方案怎么样?

#2

I've done such a thing, also with several thousands of entries. The problems:

我做过这样的事情，也有成千上万的条目。存在的问题:

• it's difficult for the end user to navigate trough the list if there are hundreds of cities to choose

  如果有数百个城市可供选择，最终用户很难通过列表导航

• dropdowns as they are terrible for such things

  下拉，因为他们对这样的事情很可怕。

• querying a database to obtain info is stressful because the query is basically the same, with same results, nearly never-changing.

  为了获取信息而查询数据库是很困难的，因为查询基本上是一样的，结果是一样的，几乎是不变的。

So on to solutions:

所以解决方案:

• I still stood by dropdowns, but I added (trough UI) options for users to filter the list a bit. I won't post the code or the layout, if you are fine with the dropdowns as they are - keep them.

  我仍然支持下拉菜单，但是我添加了(通过UI)选项，让用户对列表进行一些过滤。我不会发布代码或布局，如果你对下拉列表很好——保留它们。

• I loaded all of the countries, cities and areas via JS once. Now, why - first off, it wasn't that huge of a deal, it was about 20ish kilobytes gzipped if I'm not mistaken. I didn't want the "please choose a country" > "please wait, loading cities" > "choose a city" > "please wait, loading areas" > "choose an area" thing, I absolutely hate waiting so I don't want anyone to wait if they don't have to :) So, the whole structure is loaded at once (when page is requested) and kept inside an object. If the browser supports sessionStorage, I check whether I have the object there in the first place - if not, I load it via jQuery's $.ajax call. On the web server, the script returning JSON object actually loads the data from Memcache. If there's no entry in the Memcache, then I query the db and load all the data and I store it with Memcache for later use.

  我曾经通过JS装载过所有的国家、城市和地区。首先，这没什么大不了的，如果我没弄错的话，大概是20kb。我不想“请选择一个国家”>“请稍等,加载城市”>“选择一个城市”>“请稍等,加载区域”>“选择区域”的事情,我绝对讨厌等待,所以我不希望任何人等待如果他们不必:)所以,整个结构加载一次(当页面被请求时)和保存在一个对象。如果浏览器支持sessionStorage，我首先检查是否有对象——如果没有，我就通过jQuery的$来加载它。ajax调用。在web服务器上，返回JSON对象的脚本实际上从Memcache加载数据。如果Memcache中没有条目，那么我将查询db并加载所有数据，并使用Memcache将其存储起来以备以后使用。

Now, what happens is that I've got a JS object representing all countries, cities and areas - with relations, meaning I can render the dropdowns in any way I need to, showing only relevant cities for current country selection.

现在，我得到了一个代表所有国家、城市和地区的JS对象，这意味着我可以以任何我需要的方式呈现下拉列表，只显示当前国家选择的相关城市。

Now, as you have similar structure - you can apply the same logic. Load the item when the page loads, but check if you have sessionStorage available. If yes, check if you got object there. No? Do a $.ajax call and obtain it. When dropdowns fire change event, render the appropriate data.

现在，由于你有相似的结构-你可以应用相同的逻辑。在页面加载时加载项，但是检查是否有可用的sessionStorage。如果有，检查你是否有对象。没有?做一个美元。ajax调用并获取它。当下拉火灾变更事件时，呈现适当的数据。

Hopefully this helps a little, I'm typing this in a rush :)

希望这能对你有所帮助，我现在就急急忙忙地输入:)

#3

A few responses:

一些反应:

• This is a good use of AJAX, no need to look for another method. You wouldn't want to force the client to pre-load all of the javascript arrays for the possible state/city/theater combinations...
• 这是AJAX的一个很好的用法，不需要寻找其他方法。您不会希望强制客户端预加载所有javascript数组，以实现可能的状态/城市/剧院组合……
• jQuery Autocomplete is a good tool to use to implement the UI
• jQuery自动完成是实现UI的好工具
• The list of cities and states can be obtained from GeoNames
• 城市和州的列表可以从GeoNames获得。
• How long it would take to implement depends on the skill of the implementer ;)
• 需要多长时间实现取决于实现者的技能;)

#4

Somewhat working example: http://jsfiddle.net/rA9gU/36/

有些工作示例:http://jsfiddle.net/rA9gU/36/

Hope this might help

希望这可以帮助

UPDATE: Added the NO theater found near you option

更新:增加了没有剧院发现您附近的选项

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

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

#5

You've got it. On the "on change" event for each dropdown, run an AJAX request for the options for the next dropdown.

你有它。对于每个下拉菜单的“On change”事件，运行一个AJAX请求，为下一个下拉菜单提供选项。

With jQuery it's pretty simple.

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 is by no means a requirement -- just wraps things up nicely and in cross-browser fashion.

jQuery绝不是一种需求——只是以跨浏览器的方式很好地概括了事情。

Be happy to provide a more specific example if you like.

如果你喜欢的话，乐意提供一个更具体的例子。