全国三级城市联动 jq版

$(function(){

//全国三级城市联动 jq版

function Dsy(){

this.Items = {};

}

Dsy.prototype.add = function(id,iArray){

this.Items[id] = iArray;

}

Dsy.prototype.Exists = function(id){

if(typeof(this.Items[id]) == "undefined") return false;

return true;

}

var dsy = new Dsy();

 

dsy.add("0",["Perlis","Kedah"]);

 

dsy.add("0_0",["Arau","Kaki Bukit","Kangar"]);

 

dsy.add("0_1",["Alor Setar","Ayer Hitam","Baling"]);

var htmlState="";

for(var i=0;i<dsy.Items[0].length;i++){

htmlState+="<option value='"+i+"'>"+dsy.Items[0][i]+"</option>"

}

$("#s_province").html(htmlState)

var htmlCity="";

for(var i=0;i<dsy.Items["0_0"].length;i++){

htmlCity+="<option value='"+i+"'>"+dsy.Items["0_0"][i]+"</option>"

}

$("#s_city").html(htmlCity)

$("#s_province").change(function(){

var num=$(this).val();

var html="";

for(var i=0;i<dsy.Items[0].length;i++){

html+="<option value='"+i+"'>"+dsy.Items["0_"+num+""][i]+"</option>"

}

$("#s_city").html(html)

})

})

数据存储一般是后台接口拿过来的，为了展示效果，参考别人的一个比较简洁的前端存储方法