js實(shí)現(xiàn)簡單省市區(qū)三級選擇聯(lián)級
更新時間：2021年04月27日 10:06:01 作者：魏郴
這篇文章主要介紹了js實(shí)現(xiàn)簡單省市區(qū)三級選擇聯(lián)級，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)省市區(qū)三級選擇聯(lián)級的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province">
<option>---請選擇---</option>
</select>
<select id="city">
<option>---請選擇---</option>
</select>
<select id="area">
<option>---請選擇---</option>
</select>
<script src="addr.js"></script>
<script src="../lib/jquery-3.3.1.js"></script>
<script>
var pro = [];
$(function (){
$.each(temp,function (){
$("#province").append("<option>"+$(this)[0].label+"</option>");
});
$("#province").on("change",function (){
$("#city").html("<option>"+"---請選擇---"+"</option>");
$("#area").html("<option>"+"---請選擇---"+"</option>")
var select_pro = $(this).val();
$.each(temp,function (index,element){
if (element.label == select_pro){
var city = element.children;
for (let i = 0; i < city.length ; i++) {
$("#city").append("<option>"+city[i].label+"</option>");
}
$("#city").on('change',function ()
{
$("#area").html("<option>"+"---請選擇---"+"</option>");
var select_city = $(this).val();
for (var i=0;i < city.length ; i++)
{
console.log(city[i].label);
if (city[i].label == select_city)
{
var area = city[i].children;
for (var i=0;i < area.length ; i++)
{
$("#area").append("<option>"+area[i].label+"</option>");
}
}
}
});
}
});
});
});
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)的全國省市二級聯(lián)動下拉選擇菜單完整實(shí)例
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級聯(lián)動
- JS制作簡單的三級聯(lián)動
- Vue.js 2.0中select級聯(lián)下拉框?qū)嵗?/a>
- 最好用的二級聯(lián)動 原生js實(shí)現(xiàn)你值得擁有
- JS實(shí)多級聯(lián)動下拉菜單類，簡單實(shí)現(xiàn)省市區(qū)聯(lián)動菜單！
- javascript實(shí)現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
- 省市區(qū)三級聯(lián)動下拉框菜單javascript版
- jquery+json 通用三級聯(lián)動下拉列表
- js實(shí)現(xiàn)全國省份城市級聯(lián)下拉菜單效果代碼
相關(guān)文章
因?yàn)橐鲆粋€日歷控件,遇到國家法定節(jié)假日,怎么實(shí)現(xiàn)此功能呢？其實(shí)實(shí)現(xiàn)代碼很簡單的,下面小編給大家分享js判斷節(jié)假日實(shí)例代碼,需要的朋友參考下吧2017-12-12
node.js Web應(yīng)用框架Express入門指南
這篇文章主要介紹了node.js Web應(yīng)用框架Express入門指南,從安裝到各種技術(shù)的應(yīng)用,都進(jìn)行了講解,是一篇不錯的Express入門教程,需要的朋友可以參考下2014-05-05
Extjs顯示從數(shù)據(jù)庫取出時間轉(zhuǎn)換JSON后的出現(xiàn)問題
后臺從數(shù)據(jù)庫取出時間，JSON格式化后再傳到gridpanel，這時時間變成了：/Date(32331121223)/這樣的格式,本文將詳細(xì)介紹解決Extjs顯示從數(shù)據(jù)庫取出時間轉(zhuǎn)換JSON后的出現(xiàn)問題2012-11-11
js實(shí)現(xiàn)仿阿里巴巴城市選擇框效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)仿阿里巴巴城市選擇框效果,實(shí)例分析了javascript結(jié)合css與數(shù)組實(shí)現(xiàn)城市選擇框的方法,需要的朋友可以參考下2015-06-06
微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型（附完整案例）
這篇文章主要介紹了微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型（附完整案例），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
JavaScript在Android的WebView中parseInt函數(shù)轉(zhuǎn)換不正確問題解決方法
這篇文章主要介紹了JavaScript在Android的WebView中parseInt函數(shù)轉(zhuǎn)換不正確問題解決方法,因轉(zhuǎn)換的字符串?dāng)?shù)字都以0開頭,導(dǎo)致parseInt函數(shù)在瀏覽器和Android WebView中轉(zhuǎn)換結(jié)果不一樣,本文給出了解決方法,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了H5移動端圖片壓縮上傳開發(fā)流程,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)登錄框拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
使用JavaScript輕松實(shí)現(xiàn)拖拽功能
這篇文章主要介紹了使用JavaScript輕松實(shí)現(xiàn)拖拽功能,讓你的網(wǎng)頁動起來,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
這篇文章主要為大家介紹了JS瀏覽器的首屏白屏?xí)r間計算示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11