jquery+json省市二级联动下拉

前端之家收集整理的这篇文章主要介绍了jquery+json省市二级联动下拉前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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数组:

[{
@H_502_8@ "name"@H_502_8@ :"山东省",
@H_502_8@ "id"@H_502_8@ :@H_502_8@ "001",
@H_502_8@ "items"@H_502_8@ :@H_502_8@ [{
@H_502_8@  "parentNode"@H_502_8@ :@H_502_8@ "山东省",
@H_502_8@  "name"@H_502_8@ :@H_502_8@ "济南市",
@H_502_8@  "id"@H_502_8@ :@H_502_8@ "00101"
@H_502_8@ },
@H_502_8@ {
@H_502_8@  "parentNode"@H_502_8@ :@H_502_8@ "山东省",
@H_502_8@  "name"@H_502_8@ :@H_502_8@ "青岛市",
@H_502_8@  "id"@H_502_8@ :@H_502_8@ "00102"
@H_502_8@ }]
},{
@H_502_8@ "name"@H_502_8@ :"山西省",
@H_502_8@ "id"@H_502_8@ :@H_502_8@ "002",
@H_502_8@ "items"@H_502_8@ :@H_502_8@ [{
@H_502_8@  "parentNode"@H_502_8@ :@H_502_8@ "山西省",
@H_502_8@  "name"@H_502_8@ :@H_502_8@ "太原市",
@H_502_8@  "id"@H_502_8@ :@H_502_8@ "00201"
@H_502_8@ },
@H_502_8@ {
@H_502_8@  "parentNode"@H_502_8@ :@H_502_8@ "山西省",
@H_502_8@  "name"@H_502_8@ :@H_502_8@ "大同市",
@H_502_8@  "id"@H_502_8@ :@H_502_8@ "00202"
@H_502_8@ }]
}]
3.javascript代码
function@H_502_8@ initPro()@H_502_8@ {
@H_502_8@ var@H_502_8@ option1 =@H_502_8@ '';
@H_502_8@ $.@H_502_8@getJSON("http://127.0.0.1:8080/json/js/citysData.json",function(@H_502_8@jsonData)@H_502_8@ {
@H_502_8@  $.@H_502_8@each(@H_502_8@jsonData,@H_502_8@ function(@H_502_8@index,@H_502_8@ indexItems)@H_502_8@ {
@H_502_8@   option1 +=@H_502_8@ "<option id="@H_502_8@ +@H_502_8@ indexItems.@H_502_8@id +@H_502_8@ ">"
@H_502_8@     +@H_502_8@ indexItems.@H_502_8@name +@H_502_8@ "</option>";
@H_502_8@  });
@H_502_8@  $("#provice").@H_502_8@append(@H_502_8@option1);
@H_502_8@  $("#provice").@H_502_8@bind("change",@H_502_8@ function()@H_502_8@ {
@H_502_8@   selectCity(@H_502_8@jsonData);
@H_502_8@  })
@H_502_8@ });
@H_502_8@ function@H_502_8@ selectCity(@H_502_8@data)@H_502_8@ {
@H_502_8@  var@H_502_8@ option2 =@H_502_8@ '';
@H_502_8@  var@H_502_8@ selectedIndex =@H_502_8@ $("#provice :selected").@H_502_8@text();
@H_502_8@  $("#selectCity").@H_502_8@empty();
@H_502_8@  if(@H_502_8@$("#provice :selected").val()@H_502_8@ ==@H_502_8@ -1){
@H_502_8@   $("#selectCity").@H_502_8@append("<option id=\"-1\">请选择城市</option>");
@H_502_8@  }
@H_502_8@  $.@H_502_8@each(@H_502_8@data,@H_502_8@ indexItems)@H_502_8@ {
@H_502_8@   var@H_502_8@ proName =@H_502_8@ indexItems.@H_502_8@name;
@H_502_8@   $.@H_502_8@each(@H_502_8@indexItems.@H_502_8@items,@H_502_8@ indexItems)@H_502_8@ {
@H_502_8@    if@H_502_8@ (@H_502_8@indexItems.@H_502_8@parentNode !=@H_502_8@ selectedIndex)@H_502_8@ {
@H_502_8@     return;
@H_502_8@    }@H_502_8@ else@H_502_8@ {
@H_502_8@     option2 +=@H_502_8@ "<option id="@H_502_8@ +@H_502_8@ indexItems.@H_502_8@id +@H_502_8@ ">"
@H_502_8@       +@H_502_8@ indexItems.@H_502_8@name +@H_502_8@ "</option>";
@H_502_8@    }
@H_502_8@   })
@H_502_8@  });
@H_502_8@  $("#selectCity").@H_502_8@append(@H_502_8@option2);
@H_502_8@ };
};
@H_502_8@$(function()@H_502_8@ {
@H_502_8@ initPro();
});

猜你在找的Json相关文章