Search code examples
javascriptajaxdrop-down-menudynamic-data

Dynamic drop down menus using JavaScript without using a database


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


Solution

  • 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.