JavaScript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉框
Javascript是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類型的區(qū)分大小寫的客戶端腳本語言，主要目的是為了解決服務(wù)器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。
這個(gè)是簡(jiǎn)單也是最基本的聯(lián)動(dòng)下拉框的示例，這個(gè)示例主要針對(duì)那些只有二級(jí)聯(lián)動(dòng)，且***級(jí)是固定的選項(xiàng)，第二級(jí)的內(nèi)容也比較簡(jiǎn)單。這里使用了javascript來聯(lián)動(dòng)第二級(jí)下拉框 。
顯示代碼打印
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <TITLE> New Document </TITLE>
- <META NAME="Generator" CONTENT="EditPlus">
- <META NAME="Author" CONTENT="">
- <META NAME="Keywords" CONTENT="">
- <META NAME="Description" CONTENT="">
- <script language="JavaScript" type="text/javascript">
- //定義了城市的二維數(shù)組，里面的順序跟省份的順序是相同的。通過selectedIndex獲得省份的下標(biāo)值來得到相應(yīng)的城市數(shù)組
- var city=[
- ["北京","天津","上海","重慶"],
- ["南京","蘇州","南通","常州"],
- ["福州","福安","龍巖","南平"],
- ["廣州","潮陽","潮州","澄海"],
- ["蘭州","白銀","定西","敦煌"]
- ];
- function getCity(){
- //獲得省份下拉框的對(duì)象
- var sltProvince=document.form1.province;
- //獲得城市下拉框的對(duì)象
- var sltCity=document.form1.city;
- //得到對(duì)應(yīng)省份的城市數(shù)組
- var provinceCity=city[sltProvince.selectedIndex - 1];
- //清空城市下拉框，僅留提示選項(xiàng)
- sltCity.length=1;
- //將城市數(shù)組中的值填充到城市下拉框中
- for(var i=0;i<provinceCity.length;i++){
- sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
- }
- }
- </script>
- </HEAD>
- <BODY>
- <FORM METHOD=POST ACTION="" name="form1">
- <SELECT NAME="province" onChange="getCity()">
- <OPTION VALUE="0">請(qǐng)選擇所在省份 </OPTION>
- <OPTION VALUE="直轄市">直轄市 </OPTION>
- <OPTION VALUE="江蘇省">江蘇省 </OPTION>
- <OPTION VALUE="福建省">福建省 </OPTION>
- <OPTION VALUE="廣東省">廣東省 </OPTION>
- <OPTION VALUE="甘肅省">甘肅省 </OPTION>
- </SELECT>
- <SELECT NAME="city">
- <OPTION VALUE="0">請(qǐng)選擇所在城市 </OPTION>
- </SELECT>
- </FORM>
- </BODY>
- </HTML>
這段代碼比較簡(jiǎn)單。
如果對(duì)js不大熟悉，可以看看下面關(guān)于js處理select對(duì)象的內(nèi)容：
1、使用selectedIndex屬性獲取當(dāng)前選項(xiàng)的索引
下拉框的選項(xiàng)是一個(gè)線性數(shù)組，每個(gè)選項(xiàng)都有一個(gè)索引，selectedIndex表示當(dāng)前被選中的選項(xiàng)的索引號(hào)。結(jié)合options屬性，可以得到被選中的option對(duì)象，從而對(duì)其做進(jìn)一步的處理。當(dāng)下拉框可多選時(shí)，selectedIndex屬性返回***個(gè)被選中的索引。
selectedIndex是個(gè)只讀的屬性，想把通過索引指定的下拉框的項(xiàng)設(shè)置為選中狀態(tài)，可以設(shè)置option對(duì)象的selected=true來實(shí)現(xiàn)。
2、為select對(duì)象添加一個(gè)選項(xiàng)
顯示代碼打印
- sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
- new Option(provinceCity[i],provinceCity[i])
表示創(chuàng)建一個(gè)值為provinceCity[i]，文本為provinceCity[i]的option對(duì)象，sltCity是頁面上的city對(duì)象，i+1指定新添選項(xiàng)的位置。
3、清空一個(gè)select對(duì)象
要將下拉框的所有選項(xiàng)刪除有兩種方法，***種方法就是遍歷刪除：
顯示代碼打印
- var l=myselect.length;
- for(var i=0;i<l;i++){
- myselect.options[i]=null;
- }
第二種方法比較簡(jiǎn)單，因此一般都使用此方法：
顯示代碼打印
- myselect.length=0;
通過本文的介紹，希望能給你帶來幫助。關(guān)于其他下拉框聯(lián)動(dòng)的問題，將在后續(xù)章節(jié)中繼續(xù)介紹，敬請(qǐng)關(guān)注。
【編輯推薦】
- JavaScript變量作用域之我見
- 高性能WEB開發(fā)之如何加載JavaScript
- 泄露你的JavaScript技術(shù)很爛的五個(gè)表現(xiàn)
- 從零開始學(xué)習(xí)jQuery之你必須知道的JavaScript
