常春岛资源网 Design By www.syssdc.com
本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》
希望本文所述对大家JavaScript程序设计有所帮助。
标签:
js,省市县,三级联动
常春岛资源网 Design By www.syssdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
常春岛资源网 Design By www.syssdc.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2025年11月15日
2025年11月15日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]