js实现简单的省市县三级联动效果实例
本文实例讲述了js实现简单的省市县三级联动效果。分享给大家供大家参考，具体如下：
js代码部分
//省市县数据格式
varprovince_city_county_data=[
{
province:"四川",
city:[
{
cityName:"成都",
county:["成都市","崇州市","金堂县"]
},
{
cityName:"南充",
county:["仪陇县","南部县","营山县"]
}
]
},
{
province:"北京",
city:[
{cityName:"北京市",
county:["东城区","朝阳区"]
}
]
},
{
province:"安徽",
city:[
{cityName:"安庆",
county:["安庆市","怀宁县","潜山县"]
},
{cityName:"蚌埠",
county:["蚌埠市","固镇县","怀远县"]
}
]
}
]
varopt0=["省份","地级市","市、县级市、县"];
varselectID_arr2=["provinceid","cityid","countyid"];
varprovince_index;
window.onload=function(){
//初始化下拉框
functioninit_select(){
init_title();
init_province();
bind_province();
}
//初始化提示标题
functioninit_title(){
for(vark=0;k<selectID_arr2.length;k++){
varselect_obj=document.getElementById(selectID_arr2[k]);
select_obj.options[0]=newOption(opt0[k],opt0[k]);
}
}
//初始化省份
functioninit_province(){
varprovince_select_obj=document.getElementById(selectID_arr2[0]);
varprovince_len=province_city_county_data.length;
for(vari=0;i<province_len;i++){
province_select_obj.options[i+1]=newOption(province_city_county_data[i].province,province_city_county_data[i].province);
}
}
//给省份绑定onchange事件
functionbind_province(){
varprovince_select_obj=document.getElementById(selectID_arr2[0]);
province_select_obj.onchange=function(){
varopt_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();
}
}
}
//选择一个省份才能初始化地级市
functioninit_city(index){
clear_city();
varcity_len=province_city_county_data[index].city.length;
for(vari=0;i<city_len;i++){
document.getElementById(selectID_arr2[1]).options[i+1]=newOption(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;
}
//清除地级市信息
functionclear_city(){
varcity_select_obj=document.getElementById(selectID_arr2[1]);
city_select_obj.options.length=0;//每次选中一个新的省份都重新删除地级市的信息
init_title();//重新初始化标题
}
//给地级市绑定onchange事件
functionbind_city(){
varcity_select_obj=document.getElementById(selectID_arr2[1]);
city_select_obj.onchange=function(){
varopt_index=city_select_obj.selectedIndex;
if(opt_index!=0){
init_county(province_index,opt_index-1);
}else{
clear_county();
}
}
}
//选择一个地级市后才能初始化县
functioninit_county(index,city_index){
clear_county();
varcounty_len=province_city_county_data[index].city[city_index].county.length;
for(vari=0;i<county_len;i++){
document.getElementById(selectID_arr2[2]).options[i+1]=newOption(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;
}
//清除县城信息
functionclear_county(){
varcounty_select_obj=document.getElementById(selectID_arr2[2]);
county_select_obj.options.length=0;//每次选中一个新的地级市都重新删除县的信息
init_title();//重新初始化标题
}
init_select()
}
html部分
<selectid="provinceid"></select> <selectid="cityid"></select> <selectid="countyid"></select>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》
希望本文所述对大家JavaScript程序设计有所帮助。