Javascript是一種由Netscape的LiveScript發(fā)展而來(lái)的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類型的區(qū)分大小寫(xiě)的客戶端腳本語(yǔ)言，主要目的是為了解決服務(wù)器端語(yǔ)言，比如Perl，遺留的速度問(wèn)題，為客戶提供更流暢的瀏覽效果。

這個(gè)是簡(jiǎn)單也是最基本的聯(lián)動(dòng)下拉框的示例，這個(gè)示例主要針對(duì)那些只有二級(jí)聯(lián)動(dòng)，且***級(jí)是固定的選項(xiàng)，第二級(jí)的內(nèi)容也比較簡(jiǎn)單。這里使用了javascript來(lái)聯(lián)動(dòng)第二級(jí)下拉框 。

顯示代碼打印 

 
 
 

  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
//定義了城市的二維數(shù)組，里面的順序跟省份的順序是相同的。通過(guò)selectedIndex獲得省份的下標(biāo)值來(lái)得到相應(yīng)的城市數(shù)組   
  
  
  
var city=[   
  
  
  
["北京","天津","上海","重慶"],   
  
  
  
["南京","蘇州","南通","常州"],   
  
  
  
["福州","福安","龍巖","南平"],   
  
  
  
["廣州","潮陽(yáng)","潮州","澄海"],   
  
  
  
["蘭州","白銀","定西","敦煌"]   
  
  
  
];    
  
  
  
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
  
  
  
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);   
  
  
  
}   
  
  
  
}   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
請(qǐng)選擇所在省份    
  
  
  
直轄市    
  
  
  
江蘇省    
  
  
  
福建省    
  
  
  
廣東省    
  
  
  
甘肅省    
  
  
  
   
  
  
  
   
  
  
  
請(qǐng)選擇所在城市    
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
  
 
 
 

這段代碼比較簡(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è)只讀的屬性，想把通過(guò)索引指定的下拉框的項(xiàng)設(shè)置為選中狀態(tài)，可以設(shè)置option對(duì)象的selected=true來(lái)實(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是頁(yè)面上的city對(duì)象，i+1指定新添選項(xiàng)的位置。

3、清空一個(gè)select對(duì)象

要將下拉框的所有選項(xiàng)刪除有兩種方法，***種方法就是遍歷刪除：

顯示代碼打印

 
 
 

  
  
  
var l=myselect.length;   
  
  
  
for(var i=0;i
  
  
  
myselect.options[i]=null;   
  
  
  
}   
  
  
  
 
 
 
 

第二種方法比較簡(jiǎn)單，因此一般都使用此方法：

顯示代碼打印

 
 
 

  
  
  
myselect.length=0;  
 
 
 

通過(guò)本文的介紹，希望能給你帶來(lái)幫助。關(guān)于其他下拉框聯(lián)動(dòng)的問(wèn)題，將在后續(xù)章節(jié)中繼續(xù)介紹，敬請(qǐng)關(guān)注。

新聞標(biāo)題：JavaScript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉框
新聞來(lái)源：http://uogjgqi.cn/article/dpidodc.html