chained selects option 1

by aaronk85

HTML

<form id="compselectform">
    <select id="cat"></select>
    <select disabled="disabled" id="assocs" onchange="if (this.value) window.location.href=this.value"><option>Select a venue</option></select>
</form>

<script>jQuery(window).load(function(){
jQuery(document).ready(function(){

    var menulist = { 
    "states" :  [
{
 "state" : "Sandwiches",
 "assocs" : [
     {"name": "Turkey", "url": "http://www.example.com/"},
   {"name": "Ham", "url": "http://www.example.com/"},
   {"name": "Bacon", "url": "http://www.example.com/"}
  ]
 },{
 "state" : "Surles",
 "assocs" : [
   {"name": "Mac 'n Cheese", "url": "http://www.example.com/"},
   {"name": "Mashed Potatoes", "url": "http://www.example.com/"}
  ]
 },{
 "state" : "Drinks",
 "assocs" : [
   {"name": "Coca Cola", "url": "http://www.example.com/"},
   {"name": "Sprite", "url": "http://www.example.com/"},
   {"name": "Sweetwater 420", "url": "http://www.example.com/"}
  ]
 }]
};

var i,c = '<option>Select a state</option>', opt = $('<option/>');
var menu = menulist.states;

for (i=0; i < menu.length; i++){
 c += '<option>' + menu[i].state + '</option>';
}
jQuery('#cat')
 .html(c)
 .change(function(){
  var indx = this.selectedIndex - 1;
  if (indx < 0) {
   jQuery('#assocs').empty().attr('disabled','disabled');
   return;
  }
  var item = '<option>Select an item</option>';
  for (i=0; i < menu[indx].assocs.length; i++){
    item += '<option value="' + menu[indx].assocs[i].url + '">' + menu[indx].assocs[i].name + '</options>';
  }
  jQuery('#assocs').html(item).removeAttr('disabled');
 });

});});


</script>