jquery+json+ajax省市二级联动下拉

1.html代码：

<form name="fm" id="fm">
     <select id="provice">
          <option value="-1">请选择省份</option>
     </select>
     <select id="selectCity">
          <option value="-1">请选择城市</option>
     </select>
</form>

2.定义的json数组：

[{  "name" :"山东省",  "id" : "001",  "items" : [{   "parentNode" : "山东省",   "name" : "济南市",   "id" : "00101"  },  {   "parentNode" : "山东省",   "name" : "青岛市",   "id" : "00102"  }] },{  "name" :"山西省",  "id" : "002",  "items" : [{   "parentNode" : "山西省",   "name" : "太原市",   "id" : "00201"  },  {   "parentNode" : "山西省",   "name" : "大同市",   "id" : "00202"  }] }]

3.javascript代码：

function initPro() {  var option1 = '';  $.getJSON("http://127.0.0.1:8080/json/js/citysData.json",function(jsonData) {   $.each(jsonData, function(index, indexItems) {    option1 += "<option id=" + indexItems.id + ">"      + indexItems.name + "</option>";   });   $("#provice").append(option1);   $("#provice").bind("change", function() {    selectCity(jsonData);   })  });  function selectCity(data) {   var option2 = '';   var selectedIndex = $("#provice :selected").text();   $("#selectCity").empty();   if($("#provice :selected").attr("id") == -1){    $("#selectCity").append("<option id=\"-1\">请选择城市</option>");   }   $.each(data, function(index, indexItems) {    var proName = indexItems.name;    $.each(indexItems.items, function(index, indexItems) {     if (indexItems.parentNode != selectedIndex) {      return;     } else {      option2 += "<option id=" + indexItems.id + ">"        + indexItems.name + "</option>";     }    })   });   $("#selectCity").append(option2);  }; }; $(function() {  initPro(); });

引用来自 http://blog.csdn.net/linbooooo1987/article/details/7235205