JavaScript實(shí)現(xiàn)省市縣三級級聯(lián)特效
本文實(shí)例為大家分享了js省市縣三級級聯(lián)特效的實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
主要思想
1.省改變,市改變,并初始化縣
2.市改變,縣改變
html代碼
<select id="sheng"> <option value="">--請選擇--</option> <option value="0">北京市</option> <option value="1">河北省</option> <option value="2">山西省</option> <option value="3">內(nèi)蒙古自治區(qū)</option> </select> <select id="shi"> <option value="">--請選擇--</option> </select> <select id="xian"> <option value="">--請選擇--</option> </select>
主要步驟
1.獲取元素對象
var sheng = document.getElementById('sheng'); var shi = document.getElementById('shi'); var xian = document.getElementById('xian');
2.定義市和縣的數(shù)組
var city = [ ['昌平區(qū)', '海淀區(qū)', '朝陽區(qū)', '東城區(qū)'], ['石家莊市', '保定市', '張家口市', '唐山市'], ['太原市', '大同市', '運(yùn)城市', '臨汾市'], ['呼和浩特市', '包頭市', '鄂爾多斯市', '赤峰市'] ]; var xians = [ [ ['北七家','回龍觀','霍營'], ['中關(guān)村','蘇州街','西二旗'], ['朝陽1','朝陽2','朝陽3'], ['東城1','東城2','東城3'], ], [ ['新華區(qū)','橋東區(qū)','橋西區(qū)'], ['高碑店','白溝','定興'], ] ];
3.定義全局變量
var index = null;
4.實(shí)現(xiàn)省份改變,市跟著變化的效果
sheng.onchange = function() { xian.innerHTML = '<option value="">--請選擇--</option>';// 初始化xian index = this.value; // 獲取option的值 var result = city[index];//根據(jù)index去city數(shù)組中獲取對應(yīng)的shi // 將獲取的結(jié)果顯示在select#shi中,循環(huán)result數(shù)組中的"每一個值",在值的兩側(cè)加上option標(biāo)簽 var str = '<option value="">--請選擇--</option>'; for (var i = 0; i < result.length; i++) { // 將所有的拼接好的市再次拼接為一個整體 str += '<option value="'+i+'">' + result[i] + '</option>'; } shi.innerHTML = str;//將字符串寫入到select#shi中 }
5.實(shí)現(xiàn)市改變,獲取縣城的效果
shi.onchange = function(){ var value = this.value; // 獲取當(dāng)前的value值 var county = xians[index][value]; // 根據(jù)市獲取市對應(yīng)的縣 var str = '<option value="">--請選擇--</option>'; for (var i = 0; i < county.length; i++) { str += '<option value="'+i+'">' + county[i] + '</option>'; } xian.innerHTML = str;//將數(shù)據(jù)寫入到select#xian中 }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js省市縣三級聯(lián)動效果實(shí)例
- js實(shí)現(xiàn)簡單的省市縣三級聯(lián)動效果實(shí)例
- 原生JavaScript實(shí)現(xiàn)動態(tài)省市縣三級聯(lián)動下拉框菜單實(shí)例代碼
- jQuery+jsp實(shí)現(xiàn)省市縣三級聯(lián)動效果(附源碼)
- javascript解析xml實(shí)現(xiàn)省市縣三級聯(lián)動的方法
- jQuery ajax實(shí)現(xiàn)省市縣三級聯(lián)動
- jQuery實(shí)現(xiàn)的省市縣三級聯(lián)動菜單效果完整實(shí)例
- jquery讀取xml文件實(shí)現(xiàn)省市縣三級聯(lián)動的方法
相關(guān)文章
JavaScript開發(fā)的七個實(shí)用小技巧(很有用)
日常開發(fā)中,我們經(jīng)常需要編寫大量的js代碼,下面這篇文章主要給大家介紹了關(guān)于JavaScript開發(fā)的七個實(shí)用小技巧,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04js focus不起作用的解決方法(主要是因?yàn)閐om元素是否加載完成)
js focus不起作用的解決方法(主要是因?yàn)閐om元素是否加載完成)2010-11-11js實(shí)現(xiàn)千分符和保留幾位小數(shù)的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)千分符和保留幾位小數(shù)的簡單實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08微信小程序如何調(diào)用json數(shù)據(jù)接口并解析
這篇文章主要介紹了微信小程序如何調(diào)用json數(shù)據(jù)接口并解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-06-06JavaScript實(shí)現(xiàn)在標(biāo)題欄上顯示當(dāng)前日期的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)在標(biāo)題欄上顯示當(dāng)前日期的方法,涉及javascript操作時間及DOM節(jié)點(diǎn)的技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-03-03JavaScript實(shí)現(xiàn)的原生態(tài)Tab標(biāo)簽頁功能【兼容IE6】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的原生態(tài)Tab標(biāo)簽頁功能,可兼容IE6及谷歌等瀏覽器,涉及javascript事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09