js實(shí)現(xiàn)簡(jiǎn)單的省市縣三級(jí)聯(lián)動(dòng)效果實(shí)例
本文實(shí)例講述了js實(shí)現(xiàn)簡(jiǎn)單的省市縣三級(jí)聯(lián)動(dòng)效果。分享給大家供大家參考,具體如下:
js代碼部分
//省市縣數(shù)據(jù)格式
var province_city_county_data=[
{
province:"四川",
city:[
{
cityName:"成都",
county:["成都市","崇州市","金堂縣"]
},
{
cityName:"南充",
county:["儀隴縣","南部縣","營(yíng)山縣"]
}
]
},
{
province:"北京",
city:[
{ cityName:"北京市",
county:["東城區(qū)","朝陽(yáng)區(qū)"]
}
]
},
{
province:"安徽",
city:[
{ cityName:"安慶",
county:["安慶市","懷寧縣","潛山縣"]
},
{ cityName:"蚌埠",
county:["蚌埠市","固鎮(zhèn)縣","懷遠(yuǎn)縣"]
}
]
}
]
var opt0 = ["省份","地級(jí)市","市、縣級(jí)市、縣"];
var selectID_arr2=["provinceid","cityid","countyid"];
var province_index;
window.onload = function(){
//初始化下拉框
function init_select(){
init_title();
init_province();
bind_province();
}
//初始化提示標(biāo)題
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; //每個(gè)省份的序號(hào)比 option 的下標(biāo)要小1
init_city(province_index);
bind_city();
init_county(province_index,0);
}else{
clear_city();
clear_county();
}
}
}
//選擇一個(gè)省份才能初始化地級(jí)市
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;
}
//清除地級(jí)市信息
function clear_city(){
var city_select_obj = document.getElementById(selectID_arr2[1]);
city_select_obj.options.length=0; //每次選中一個(gè)新的省份 都重新刪除地級(jí)市的信息
init_title(); //重新初始化標(biāo)題
}
//給地級(jí)市綁定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();
}
}
}
//選擇一個(gè)地級(jí)市后才能初始化縣
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; //每次選中一個(gè)新的地級(jí)市 都重新刪除縣的信息
init_title(); //重新初始化標(biāo)題
}
init_select()
}
html部分
<select id="provinceid"></select> <select id="cityid"></select> <select id="countyid"></select>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript中json操作技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript擴(kuò)展技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》及《javascript面向?qū)ο笕腴T(mén)教程》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- JS制作簡(jiǎn)單的三級(jí)聯(lián)動(dòng)
- jquery+json 通用三級(jí)聯(lián)動(dòng)下拉列表
- js實(shí)現(xiàn)一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)選擇框代碼分享
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
- ASP+JS三級(jí)聯(lián)動(dòng)下拉菜單[調(diào)用數(shù)據(jù)庫(kù)數(shù)據(jù)]
- 從QQ網(wǎng)站中提取的純JS省市區(qū)三級(jí)聯(lián)動(dòng)菜單
- asp.net省市三級(jí)聯(lián)動(dòng)的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- jQuery+jsp實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果(附源碼)
- js操縱跨frame的聯(lián)動(dòng)select下拉選項(xiàng)實(shí)例介紹
- 原生js三級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼
- 原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單省市縣三級(jí)聯(lián)動(dòng)功能示例
相關(guān)文章
JavaScript預(yù)編譯的基本概念和過(guò)程詳解
JavaScript在執(zhí)行代碼前,會(huì)進(jìn)行一個(gè)預(yù)編譯的過(guò)程,這個(gè)過(guò)程主要用于處理變量和函數(shù)聲明,預(yù)編譯分為全局預(yù)編譯和函數(shù)預(yù)編譯,本文將給大家詳細(xì)的介紹一下JavaScript預(yù)編譯的基本概念和過(guò)程,需要的朋友可以參考下2024-05-05
基于BootStrap實(shí)現(xiàn)簡(jiǎn)潔注冊(cè)界面
這篇文章主要介紹了基于BootStrap實(shí)現(xiàn)簡(jiǎn)潔注冊(cè)界面,需要的朋友可以參考下2017-07-07
詳解Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用
本篇文章主要介紹了Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法,數(shù)組亂序的意思是,把數(shù)組內(nèi)的所有元素排列順序打亂,需要的朋友可以參考下2014-10-10
JavaScript操作選擇對(duì)象的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JavaScript操作選擇對(duì)象的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-05-05
省市選擇的簡(jiǎn)單實(shí)現(xiàn)(基于zepto.js)
下面小編就為大家?guī)?lái)一篇省市選擇的簡(jiǎn)單實(shí)現(xiàn)(基于zepto.js)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨想過(guò)來(lái)看看吧2016-06-06
原生javascript實(shí)現(xiàn)類(lèi)似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
這篇文章主要介紹了原生javascript實(shí)現(xiàn)類(lèi)似vue的數(shù)據(jù)綁定功能,結(jié)合實(shí)例形式分析了JavaScript基于觀察者模式實(shí)現(xiàn)類(lèi)似vue的數(shù)據(jù)綁定相關(guān)操作技巧,需要的朋友可以參考下2020-02-02

