js實現(xiàn)省市級聯(lián)效果分享
更新時間：2017年08月10日 11:05:25 作者：Fickle_actor
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)省市級聯(lián)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)省市級聯(lián)效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
var shengArr =new Array();
shengArr["廣東"]=["廣州","深圳","珠海","汕頭","韶關(guān)"] ;
shengArr["湖南"]=["長沙","張家界","株洲","懷化","常德"] ;
shengArr["湖北"]=["武漢","荊州","宜昌","黃岡","仙桃"] ;
shengArr["安徽"]=["合肥","黃山"] ;
shengArr["河南"]=["鄭州","信陽","洛陽"] ;
function getSheng(){
var s =document.getElementById("sheng");
for(var v in shengArr){
s.add(new Option(v,v),null);
}
}
function getCity(){
var s =document.getElementById("sheng");
var c =document.getElementById("city");
var v=s.value;
c.options.length =0;
for(var i in shengArr[v]){
c.add(new Option(shengArr[v][i],shengArr[v][i]),null);
}
}
</script>
<!--頁面加載時獲取 省名-->
<body onload="getSheng()">
<!-- 改變省時匹配該省的城市名-->
省：<select id="sheng" onchange="getCity()">
<option>--請選擇</option>
</select>
市：<select id="city"></select>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js時間戳轉(zhuǎn)為日期格式的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
刪除記錄時的提示效果，挺人性化的，實現(xiàn)的方法有很多，在本文為大家介紹下使用js是如何實現(xiàn)的2013-12-12
本篇文章主要介紹了babel之配置文件.babelrc入門詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了ionic2懶加載配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
渲染真實DOM的開銷很大，有時候我們修改了某個數(shù)據(jù)，直接渲染到真實dom上會引起整個dom樹的重繪和重排。我們希望只更新我們修改的那一小塊dom，而不是整個dom，diff算法就幫我們實現(xiàn)了這點。diff算法的本質(zhì)就是：找出兩個對象之間的差異，目的是盡可能做到節(jié)點復(fù)用2022-12-12
淺析Javascript中雙等號(==)隱性轉(zhuǎn)換機制
這篇文章給大家詳細(xì)介紹了javascript中雙等號(==)隱性轉(zhuǎn)換機制，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-10-10
今天讓我們站在語言的高度來看一下Javascript都有點什么。因為是全局性的俯瞰，所以不針對細(xì)節(jié)作詳細(xì)的講解。2010-10-10
這篇文章主要為大家詳細(xì)介紹了js手動播放圖片實現(xiàn)圖片輪播效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
在IE7、IE8中，使用JavaScript提供的close()方法都可以關(guān)閉當(dāng)前窗口或標(biāo)簽，但都提示討厭的對話框，找了下代碼，終于可以無提示直接關(guān)閉了。2009-08-08
這篇文章主要為大家介紹了GoJs連線繪圖模板Link使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04