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); 

});