使用JavaScript而不使用数据库的动态下拉菜单

Question

Is there a quick and dirty technique of creating dynamic drop down menus without using a database backend? There will be three levels of drop down menus and there are an awful lot of items in them, hence the quick and dirty!

Thanks

Answer 1

The fact that you choose to load the items from a database is pretty much unrelated to the drop-down menu itself. You can always read from a JSON, .csv or xml file. Depending on the implementation, you could even have the items loaded straight into the HTML page (but that would be painfully slow if you have many of them, so not recommended).

Load the file (preferably JSON) containing your items via AJAX, parse it and create the markup dynamically.

It's pretty hard to give details as the source of the contents shouldn't be so important. If you plan to use the classic <select> tag, just create that element. jQuery is your friend for quick and dirty.

Using JSON.parse() will return the structured object which you can use to loop through elements and add children to the <select> node.

Answer 2

Your question is a bit vague, so I'll give you a "general" answer.

There are tools like jQuery and knockoutJS out there. You could use knockoutJS to represent a client side view model and use it ( maybe combined with jQuery ) to populate the view with your data.

I think you should take a look at knockoutJS and especially observables, observable arrays, the options binding, and its support for AJAX requests - that sounds like a reasonable place to start.

The knockoutJS documentation can be found here: http://knockoutjs.com/documentation/introduction.html