javascript - One drop down list contents depending on another -

i attempting create 2 drop down lists: drop down list lists country. , drop down list b lists city. list b empty while list populated country. user can choose country, causing list b automatically list cities in list a. these naturally come database, not target of question. question how bind list b dependent on list a. i've spent couple of hours researching answer , trying out various jquery , javascript methods. i'm stuck @ trying list b respond list using change method of list a, far, nothing seems working, nor able trigger response list b in terms of adding test values.

how do this?

here working fiddle: relative drop-down

$(function() { var cities = {     'india': ['delhi', 'mumbai', 'bangalore', 'ahmedabad'],     'usa': ['london', 'los angeles', 'austin', 'new york'] }; var hashfunc = function(country, city){     return country + "." + city; }; //the form var form = new backbone.form({     schema: {         country: { type: 'select', options: ['india', 'usa'] },         city: { type: 'select', options: cities.india},     } }).render(); form.on('country:change', function(form, countryeditor) {     var country = countryeditor.getvalue(),         newoptions = cities[country];     form.fields.city.editor.setoptions(newoptions);  });   //add page $('body').append(form.el); });