JavaScript實現(xiàn)省市縣三級級聯(lián)特效
更新時間:2017年05月16日 15:02:14 作者:Cheny0815
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)省市縣三級級聯(lián)特效,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js省市縣三級級聯(lián)特效的實現(xiàn)代碼,供大家參考,具體內容如下
主要思想
1.省改變,市改變,并初始化縣
2.市改變,縣改變
html代碼
<select id="sheng"> <option value="">--請選擇--</option> <option value="0">北京市</option> <option value="1">河北省</option> <option value="2">山西省</option> <option value="3">內蒙古自治區(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ū)'], ['石家莊市', '保定市', '張家口市', '唐山市'], ['太原市', '大同市', '運城市', '臨汾市'], ['呼和浩特市', '包頭市', '鄂爾多斯市', '赤峰市'] ]; var xians = [ [ ['北七家','回龍觀','霍營'], ['中關村','蘇州街','西二旗'], ['朝陽1','朝陽2','朝陽3'], ['東城1','東城2','東城3'], ], [ ['新華區(qū)','橋東區(qū)','橋西區(qū)'], ['高碑店','白溝','定興'], ] ];
3.定義全局變量
var index = null;
4.實現(xiàn)省份改變,市跟著變化的效果
sheng.onchange = function() { xian.innerHTML = '<option value="">--請選擇--</option>';// 初始化xian index = this.value; // 獲取option的值 var result = city[index];//根據(jù)index去city數(shù)組中獲取對應的shi // 將獲取的結果顯示在select#shi中,循環(huán)result數(shù)組中的"每一個值",在值的兩側加上option標簽 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.實現(xiàn)市改變,獲取縣城的效果
shi.onchange = function(){ var value = this.value; // 獲取當前的value值 var county = xians[index][value]; // 根據(jù)市獲取市對應的縣 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中 }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
js focus不起作用的解決方法(主要是因為dom元素是否加載完成)
js focus不起作用的解決方法(主要是因為dom元素是否加載完成)2010-11-11js實現(xiàn)千分符和保留幾位小數(shù)的簡單實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)千分符和保留幾位小數(shù)的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08JavaScript實現(xiàn)在標題欄上顯示當前日期的方法
這篇文章主要介紹了JavaScript實現(xiàn)在標題欄上顯示當前日期的方法,涉及javascript操作時間及DOM節(jié)點的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03JavaScript實現(xiàn)的原生態(tài)Tab標簽頁功能【兼容IE6】
這篇文章主要介紹了JavaScript實現(xiàn)的原生態(tài)Tab標簽頁功能,可兼容IE6及谷歌等瀏覽器,涉及javascript事件響應及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-09-09