2. 程式人生 > >javascript實現省市級聯效果

javascript實現省市級聯效果

阿新 • • 發佈：2019-01-19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>省市級聯</title>
<script type="text/javascript">
    
    var provinces = new Array();//定義一個省份陣列
        provinces[0] = ["00","-選擇省份-"];
        provinces[1] = ["01","北京市"];//01為北京代號
        provinces[2] = ["02","遼寧省"];//02為遼寧代號
        provinces[3] = ["03","山西省"];
        
    
    var citys = new Array();//定義城市陣列
        citys[0] = ["0101","北京市"];
        
        citys[1] = ["0201","瀋陽市"];//02**為遼寧的城市代號
        citys[2] = ["0202","大連市"];
        citys[3] = ["0203","鐵嶺市"];
        
        citys[4] = ["0301","太原市"];//03**為山西的城市代號
        citys[5] = ["0302","大同市"];
        citys[6] = ["0303","運城市"];
        
    function fillProvince(){//新增省份方法
        var province = document.getElementById("sheng");
        for(var i=0;i<provinces.length;i++){
            //建立一個Option物件並賦text值和value值
            var option = new Option(provinces[i][1],provinces[i][0]);
            //將該物件加入province(省份)陣列中
            //add(new,old)new表示新新增到old之前的物件，如果old為null,則新增到<select>末尾
            province.add(option,null);
        }
        province.options[0].selected = true;//將第一個Option物件設定為選中狀態。
    }
    function changeCity(){//選擇城市方法
        //獲取省份
        var province = document.getElementById("sheng");
        //獲取省的代號(provinceCode)
        var provinceCode = province.options[province.selectedIndex].value;
        //獲取城市
        var city = document.getElementById("shi");
        //清除當前city中的選項
        city.options.length = 0;
        //新增預設Option物件
        city.add(new Option("-選擇城市-","0000"),null);
        //通過代號分別新增對應的城市
        for(var i=0; i<citys.length;i++){
            if(citys[i][0].substring(0,2)==provinceCode){//判斷城市的前兩位代號與省份代號是否相同
                city.add(new Option(citys[i][1],citys[i][0]),null);//相同則新增該Option物件，即城市
            }
        }
        city.options[1].selected = true;//將對應的第一個城市設定為選中狀態
    }
</script>
</head>
<body>

<form>
    <select id="sheng" onchange="changeCity()">
        <script type="text/javascript">fillProvince()</script>
    </select>
    <select id="shi">
        <option value="0000" selected="selected">-選擇城市-</option>
    </select>

</form>
</body>
</html>

相關推薦

javascript實現省市級聯效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

javascript實現彈層效果

end 彈層 css樣式 posit .com nload script 代碼 ner 首先，需要有一個按鈕來模擬登錄： <button id="btnLogin"class="login-btn">登錄</button> 然後呢，我們想通過點

JS實現省市級聯

現居住地： <select id="selProvince" onchange="changeCity( )" style="width:100px"> <option>--選擇省份--</option> </select> &l

原生javascript實現分頁效果+搜尋功能

一、概述 首先，我們要明確為何需要分頁技術，主要原因有以下：   1、分頁可以提高客戶體驗度，適當地選擇合適的資料條數，讓頁面顯得更有條理，使得使用者體驗感良好，避免過多資料的冗餘。   2、提高效能的需要。 為何需要搜尋技術，主要原因有以下： 1、搜尋功能，能準確的根據使用

用Javascript實現回到頂部效果

經常看到網頁中有回到頂部的效果，今天也研究一下回到頂部有哪些方法。眾所周知，用錨鏈接是實現回到最簡單的方法，但是從使用者體驗效果來說，並不是最好的。（錨鏈接回到頂部時太快了，而且使用者可能在看到某個感興趣的東西想停下來，卻停不下來），針對上面的缺點，我們試著用Javascript的方法來得到實現。思路是這個樣

JavaScript實現點贊效果

1：通過自定義封裝函式來獲取標籤元素；2：建立閉包來實現資料緩衝的效果3：迴圈遍歷按鈕，設定點選事件本文重點：瞭解閉包的作用，通過閉包可以實現資料的緩衝，即外層函式與裡層函式之間的語句在呼叫外層函式時只會執行一次示例程式碼<!DOCTYPE html> <h

JavaScript實現下雪(Snow)效果

程式碼1：<title>Happy New Year</title><body bgcolor="#ff3300" leftmargin="0" topmargin="0" onLoad="snow()" AAAD98><scrip

javascript實現圖片放大鏡效果

當我們在電商網站上購買商品時，經常會看到這樣一種效果，當我們把滑鼠放到我們瀏覽的商品圖片上時，會出現類似放大鏡一樣的一定區域的放大效果，方便消費者觀察商品。今天我對這一技術，進行簡單實現，實現圖片放大鏡效果。 我在程式碼中進行了程式碼編寫的思路的說明和詳細的程

js 實現 省市級聯

var shengArr =new Array(); shengArr["廣東"]=["廣州","深圳","珠海","汕頭","韶關"] ; shengArr["湖南"]=["長沙","張家界","株洲","懷化","常德"] ; shengA

JavaScript實現網頁元素的拖拽效果

wid parseint fontsize current ini .net win == oct 以下的頁面中放了兩個div，能夠通過鼠標拖拽這兩個元素到任何位置。 實現該效果的HTML頁面代碼例如以下所看到的： <!DOCTYPE html> &

使用javascript實現圖片上下切換效果並且實現順序循環播放

JavaScript實現最簡單的拖拽效果

stop 效果展示 title 另存為 -h 通過 沒有 軟件 .cn 一、一些無關痛癢的嘮叨 拖拽還是挺不錯的一個頁面效果，我個人認為，其生命力在於可以讓用戶自己做一些操作，所謂自定義。例如： ①瀏覽器標簽順序的拖拽切換 現在基本上所有的選項卡式的瀏覽器都有順序拖拽切換的

js省市級聯實現

提示 scrip round ros temp rop sel 菜單 武漢 js省市級聯實現。 for [element] in [collection] 用於循環下標,常用於json for(index in arr){ console.info("下標："+i

【前端】特效-Javascript實現購物頁面圖片放大效果

position pre children mes ges 冒泡 cnblogs absolute 取值 實現效果 實現代碼: <!DOCTYPE html> <html> <head> <title>購物圖片放大&

【前端】javascript實現導航欄筋鬥雲效果特效

超時 out die ron 滑動 scrip mouseover none point 實現效果： 　　實現效果如下圖所示 實現原理： 什麽是筋鬥雲效果： 這個效果很簡單,就是鼠標移到其他導航目錄時會有背景圖片跟著鼠標滑動到當前的目錄。 實現思路： 鼠標經過的時候

【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider

pad 語句 borde nbsp strong 調用 define ide right 實現效果： 實現原理： 技術棧: javascript+jQuery+html+css 實現步驟： // 0. 獲取元素 // 1. 鼠標放置到輪播圖上，顯示兩側的

javascript實現輪播圖效果

<!DOCTYPE html> <html> <head> <title>js輪播圖</title> <style type="text/css"> #container{ width: 600px;

使用JavaScript實現彈出層效果的簡單例項

轉自：https://www.jb51.net/article/85475.htm 實現彈出層效果的思路非常簡單：將待顯示的內容先隱藏，在觸發某種條件後（如點選按鈕），將原本隱藏的內容顯示出來。 實現 ?

如何用JavaScript實現獲取驗證碼的效果

div x11 light php line lse random table syntax 轉自：http://www.php.cn/js-tutorial-411734.html HTML部分： 1 2 3 4 5 6 7 <body onload=

有了html頁面，進行二次顯示，通過html、JavaScript、jQuery的ajax三種技術，我可以實現任何介面效果

當前j2ee的web工程開發， 最常用的前端顯示技術，有兩種：html、jsp。 場景： 以html為例，當用戶執行了某個操作，j2ee的web工程反饋了一個html頁面給使用者（其實不是這麼簡單，中間有渲染的過程，這裡略過，就當使用者得到了一個html頁面）。例如點選“新