Cascading Dropdown List

Question

I am working on a web app and trying to code a form with two dropdown lists. The list in the second dropdown will be dependent on the selection from the first one. The task itself isn’t too complicated except that once the first selection is made, I need to make a database call to pull the data for the second dropdown. This is where I am having difficulty. Both lists are in fact populated from a database.

I am working on this in a python script and have been trying to do this w/ an onChange javascript function. The web app is built in Zope and page templates may be an option along w/ the python scripts.

Answer 1

you will have to use a combination of Ajax and javascript here. Onchange event of your select drop down call a javascript function. This javascript function will make a ajax request to a python script that will actually make a database hit and return you a response in a javascript variable. With this javascript variable you can edit you DOM and set the html of second select box.

see if u can get some hint from this: http://www.satya-weblog.com/2007/04/dynamically-populate-select-list-by.html

Answer 2

That's exactly what I did. Below is the javascript function I came up with. OnChange, I call getOptions and the pythonScript creates the second dropdown list. I am able to pass in a parameter to get the data I need for this dropdown. Thanks!

  function getOptions() {
    var code = 'code=' + $("dropdown1").getValue();
    var myAjax = new Ajax.Updater('dropdown2', './pythonScript', { method: 'get', parameters: code });
  }