用jQuery解析一個JSON對象，並用這個數據創建兩個下拉列表

我想動態地創建兩個下拉列表，一個是省，另一個是包含每個省的城市，所以當用戶選擇一個省，市下拉將填充，我使用jQuery的$就函數獲得從數據庫，然後將其傳遞迴的JSON數據，這裏是我迄今爲止，用jQuery解析一個JSON對象，並用這個數據創建兩個下拉列表

的jQuery：

$.getJSON("provinces.php", function(data){ 

//clean out the select list 
$('#province').html(''); 

    //run the loop to populate the province drop down list 
    $.each(data, function(i, json) { 
     var province = json.province; 
     var cities = json.cities; 

     $('#province').append(
      $('<option></option>').html(province) 
     ); 

    }); 
});

JSON的潛在問題：

[ 
{"province":"Eastern Cape","cities":"Mthatha,Njoli,Port Alfred,Port Elizabeth,Queenstown,Uitenhage"}, 
{"province":"Freestate","cities":"Thaba Nchu,Virginia,Welkom"} 
]

我正在填充省份下降，但不是城市下降。

我想聽聽大家的想法，你認爲最好的方法是實現城市下降。

來源

2010-09-10 Odyss3us

將json存儲在某處，即使用$（'...'）。data（key，value）。

添加觸發器對全省更改事件： $（'＃全省）生活（ '變'，函數（）{...}）

觸發時得到省值$（」 #province'）。val（）並用它來獲取城市。將城市作爲城市選擇器的選項（與上面顯示的技術相同）。

是否顯示城市選擇，默認爲空或完全隱藏取決於您。

（根據各省[數據量]的數量，您也可以在HTML中創建的所有選擇，只是切換的顯示）

希望這有助於！

來源

2010-09-10 09:04:03 sandstrom

複製和去;）

它填補省內場像你一樣......附加有創建的地圖（省 - >市內）。省選擇字段獲取onChange監聽器。如果可用，監聽器將城市從地圖中取出並將其設置到城市選擇框中。


$(function() { 
    var data = [ 
    {"province":"Eastern Cape","cities":"Mthatha,Njoli,Port Alfred,Port Elizabeth,Queenstown,Uitenhage"}, 
    {"province":"Freestate","cities":"Thaba Nchu,Virginia,Welkom"} 
    ] 

    var map = {}; 

    $('#cities').attr('disabled', 'disabled'); 

    $(data).each(function(i, data) { 
     map[data.province] = data.cities.split(','); 
     $('#provinces').append('<option value="' + data.province + '">'+data.province+"</option>"); 
    }); 

    $('#provinces').change(function() { 


     var disable = function() { 
      $('#cities') 
       .html('<option>select city</option>') 
       .attr('disabled', 'disabled'); 
     } 

     var enable = function() { 
      $('#cities') 
       .removeAttr('disabled', 'false') 
       .html(''); 

     } 

     if (!$(this).val()) { 
      disable(); 
      return; 
     } 
     else if (typeof map[$(this).val()] == 'undefined') { 
      alert('invalid city'); 
      disable(); 
      return; 
     } 

     enable(); 

     $(map[$(this).val()]).each(function(i, city) { 
      $('#cities').append(
       $('<option></option>') 
        .text(city) 
        .val(city) 
      ); 
     }); 
    }); 
});

來源

2010-09-10 09:13:46 hacksteak25

用jQuery解析一個JSON對象，並用這個數據創建兩個下拉列表

回答

相關問題