快捷導(dǎo)航

javascript級(jí)聯(lián)下拉列表實(shí)例代碼(自寫)

更新時(shí)間：2013年05月10日 15:17:22 作者：

javascript下拉菜單想必大家在瀏覽網(wǎng)頁(yè)的時(shí)候都會(huì)看到吧，已不是那么陌生了，本文介紹使用javascript實(shí)現(xiàn)級(jí)聯(lián)下拉列表實(shí)例，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助

Html dom 是指在w3c規(guī)范出現(xiàn)之前，各個(gè)瀏覽器支持的一些dom操作。
1，Select對(duì)象。
屬性
a,selectedIndex:用戶選擇的選項(xiàng)的下標(biāo)，下標(biāo)從0開始
b,length: 獲取或者設(shè)置選項(xiàng)的個(gè)數(shù)
c,options: 返回一個(gè)數(shù)組，數(shù)組元素是Option對(duì)象
2，Options對(duì)象
屬性：
a,text:選項(xiàng)的文本內(nèi)容
b,value:選項(xiàng)的値
c,selected: 當(dāng)該選項(xiàng)被選上，值為true，否則為false
小知識(shí)：創(chuàng)建一個(gè)Option對(duì)象

復(fù)制代碼代碼如下:

var op=new Option(text,value);

我寫的一個(gè)級(jí)聯(lián)下拉列表：

代碼如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
#d1 { 
width: 400px; 
height: 250px; 
background-color: #FFE4B5; 
margin: 40px auto; 
} 
#d1_head { 
color: white; 
font-size: 20px; 
font-family: "Arial"; 
height: 24px; 
background-color: bule; 
} 
#d1_content { 
padding-left: 30px; 
padding-top: 30px; 
} 
</style> 
<script src="prototype-1.6.0.3.js"></script> 
<script type="text/javascript"> 
function doAction(index) { 
var arr = new Array; 
arr[0] = [ new Option('--研究方向--', '-1') ]; 
arr[1] = [ new Option('商務(wù)英語(yǔ)', 'english1'), 
new Option('英美文學(xué)', 'english2') ]; 
arr[2] = [ new Option('網(wǎng)格計(jì)算', 'computer1'), 
new Option('計(jì)算機(jī)軟件', 'computer2'), 
new Option('圖形計(jì)算', 'computer3') ]; 
$('s2').innerHTML = ''; 
for (i = 0; i < arr[index].length; i++) { 
$('s2').options[i] = arr[index][i]; 
} 
} 
</script> 
</head> 
<body style="font-size:30px;"> 
<div id="d1"> 
<div id="d1_head">專業(yè)選擇</div> 
<div id="d1_content"> 
<form> 
<select naem="s1" id="s1" style="width:120px;" 
onchange="doAction(this.selectedIndex);"> 
<option value="-1">--專業(yè)--</option> 
<option value="english">--英語(yǔ)--</option> 
<option value="computer">--計(jì)算機(jī)--</option> 
</select> <select name="s2" id="s2" style="width:120px;"> 
<option value="-1">--研究方向--</option> 
</select> <input type="submit" value="確認(rèn)" /> 
</form> 
</div> 
</div> 
</body> 
</html> 