全国三级城市联动 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)

})

})

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