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