js实现简单的省市县三级联动效果实例

本文实例讲述了js实现简单的省市县三级联动效果。分享给大家供大家参考，具体如下：

js代码部分

//省市县数据格式

var province_city_county_data=[

{

province:"四川",

city:[

{

cityName:"成都",

county:["成都市","崇州市","金堂县"]

},

{

cityName:"南充",

county:["仪陇县","南部县","营山县"]

}

]

},

{

province:"北京",

city:[

{ cityName:"北京市",

county:["东城区","朝阳区"]

}

]

},

{

province:"安徽",

city:[

{ cityName:"安庆",

county:["安庆市","怀宁县","潜山县"]

},

{ cityName:"蚌埠",

county:["蚌埠市","固镇县","怀远县"]

}

]

}

]

var opt0 = ["省份","地级市","市、县级市、县"];

var selectID_arr2=["provinceid","cityid","countyid"];

var province_index;

window.onload = function(){

//初始化下拉框

function init_select(){

init_title();

init_province();

bind_province();

}

//初始化提示标题

function init_title(){

for(var k = 0;k<selectID_arr2.length;k++){

var select_obj= document.getElementById(selectID_arr2[k]);

select_obj.options[0]=new Option(opt0[k],opt0[k]);

}

}

//初始化省份

function init_province(){

var province_select_obj = document.getElementById(selectID_arr2[0]);

var province_len = province_city_county_data.length;

for(var i = 0;i<province_len;i++){

province_select_obj.options[i+1] = new Option(province_city_county_data[i].province,province_city_county_data[i].province);

}

}

//给省份绑定onchange事件

function bind_province(){

var province_select_obj = document.getElementById(selectID_arr2[0]);

province_select_obj.onchange=function(){

var opt_index =province_select_obj.selectedIndex;

if(opt_index!=0){

province_index = opt_index-1; //每个省份的序号比 option 的下标要小1

init_city(province_index);

bind_city();

init_county(province_index,0);

}else{

clear_city();

clear_county();

}

}

}

//选择一个省份才能初始化地级市

function init_city(index){

clear_city();

var city_len = province_city_county_data[index].city.length;

for(var i = 0;i<city_len;i++){

document.getElementById(selectID_arr2[1]).options[i+1] = new Option(province_city_county_data[index].city[i].cityName,province_city_county_data[index].city[i].cityName);

}

document.getElementById(selectID_arr2[1]).options[1].selected = true;

}

//清除地级市信息

function clear_city(){

var city_select_obj = document.getElementById(selectID_arr2[1]);

city_select_obj.options.length=0; //每次选中一个新的省份 都重新删除地级市的信息

init_title(); //重新初始化标题

}

//给地级市绑定onchange事件

function bind_city(){

var city_select_obj = document.getElementById(selectID_arr2[1]);

city_select_obj.onchange=function(){

var opt_index =city_select_obj.selectedIndex;

if(opt_index!=0){

init_county(province_index,opt_index-1);

}else{

clear_county();

}

}

}

//选择一个地级市后才能初始化县

function init_county(index,city_index){

clear_county();

var county_len = province_city_county_data[index].city[city_index].county.length;

for(var i = 0;i<county_len;i++){

document.getElementById(selectID_arr2[2]).options[i+1] = new Option(province_city_county_data[index].city[city_index].county[i],province_city_county_data[index].city[city_index].county[i]);

}

document.getElementById(selectID_arr2[2]).options[1].selected = true;

}

//清除县城信息

function clear_county(){

var county_select_obj = document.getElementById(selectID_arr2[2]);

county_select_obj.options.length=0; //每次选中一个新的地级市 都重新删除县的信息

init_title(); //重新初始化标题

}

init_select()

}

html部分

<select id="provinceid"></select>

<select id="cityid"></select>

<select id="countyid"></select>

希望本文所述对大家JavaScript程序设计有所帮助。