js實(shí)現(xiàn)簡單的省市縣三級(jí)聯(lián)動(dòng)效果實(shí)例
本文實(shí)例講述了js實(shí)現(xiàn)簡單的省市縣三級(jí)聯(lián)動(dòng)效果。分享給大家供大家參考,具體如下:
js代碼部分
//省市縣數(shù)據(jù)格式 var province_city_county_data=[ { province:"四川", city:[ { cityName:"成都", county:["成都市","崇州市","金堂縣"] }, { cityName:"南充", county:["儀隴縣","南部縣","營山縣"] } ] }, { province:"北京", city:[ { cityName:"北京市", county:["東城區(qū)","朝陽區(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)容感興趣的讀者可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript擴(kuò)展技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》及《javascript面向?qū)ο笕腴T教程》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- JS制作簡單的三級(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ù)庫數(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的三級(jí)聯(lián)動(dòng)select下拉選項(xiàng)實(shí)例介紹
- 原生js三級(jí)聯(lián)動(dòng)的簡單實(shí)現(xiàn)代碼
- 原生JavaScript實(shí)現(xiàn)的簡單省市縣三級(jí)聯(lián)動(dòng)功能示例
相關(guān)文章
JavaScript 跨域之POST實(shí)現(xiàn)方法
本篇文章主要介紹了JavaScript 跨域之POST實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05原生JavaScript實(shí)現(xiàn)日歷功能代碼實(shí)例(無引用Jq)
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)日歷功能代碼實(shí)例(無引用Jq),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例
這篇文章主要介紹了javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02Javascript?Object對(duì)象類型使用詳解
面向?qū)ο缶幊?Object?Oriented?Programming)將現(xiàn)實(shí)世界中的復(fù)雜關(guān)系抽象成一個(gè)個(gè)對(duì)象,通過對(duì)象之間的分工合作對(duì)現(xiàn)實(shí)世界進(jìn)行模擬,這篇文章主要介紹了Javascript?Object對(duì)象類型使用詳解2022-10-10原生javascript自定義input[type=radio]效果示例
這篇文章主要介紹了原生javascript自定義input[type=radio]效果,結(jié)合實(shí)例形式分析了javascript模擬form表單中radio效果的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實(shí)例
這篇文章主要介紹了關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06uniapp實(shí)現(xiàn)全局設(shè)置字體大小(小中大的字體切換)
隨著UniApp的流行,越來越多的開發(fā)者選擇使用它來構(gòu)建跨平臺(tái)應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)全局設(shè)置字體大小(小中大的字體切換)的相關(guān)資料,需要的朋友可以參考下2023-06-06一百行JS代碼實(shí)現(xiàn)一個(gè)校驗(yàn)工具
這篇文章主要介紹了一百行JS代碼實(shí)現(xiàn)一個(gè)校驗(yàn)工具,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04