jQuery的下拉列表填充使用JSON数据

Question

好日子，

我在网上看了看，阅读了有关使用JSON和jQuery的下拉列表中的职位。但是，我似乎无法让我的语法正确。当页面加载时，我希望城镇下拉列表包含所有城镇。一旦用户选择一个社区，那么只有该城镇的社区应该显示。

任何帮助表示赞赏。请点击这里查看我的代码http://jsfiddle.net/latoyale/XgxCP/1/

Answer 1

我做了一个工作叉：http://jsfiddle.net/ccync/

对于后人，JavaScript代码低于：

// JSON data start 

var data = [ 
    [ 
       {optionValue: 0,url: 'Choose Town',community: 'Choose Town'}, 
       {optionValue: 1,url: '/dutchess/amenia',community: 'Amenia'}, 
       {optionValue: 2,url: '/dutchess/arlington',community: 'Arlington'}, 
       {optionValue: 3,url: '/dutchess/barrytown',community: 'Barrytown'} 
    ], 


      [ {optionValue: 0,url: 'Choose Town',community: 'Choose Town'}, 
       {optionValue: 32,url: '/orange/Campbell-hall',community: 'Campbell Hall'}, 
       {optionValue: 33,url: '/orange/central-valley',community: 'Central Valley'}, 
       {optionValue: 34,url: '/orange/chester',community: 'Chester'}, 
    ] 

      ]; 

// JSON data end 


$(function() { 

    $('#page-changer')[0].reset(); // resets form onload 

    var $county = $('#county'); 
    var $township = $('#township'); 
    function updateTownshipOptions(){ 
     var selected = $county.val(); 
     if (selected) { 
      options = []; 
      var selected_data = data[$county.val()-1]; 
      for (var i=0; i<selected_data.length; i++) { 
       options.push('<option value="'+selected_data[i].optionValue+'">'+selected_data[i].community+'</option>'); 
      } 
      $township.html(options.join('')); 
     } 
    }  
    updateTownshipOptions(); 
    $county.change(updateTownshipOptions); 

});