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ì)象
var op=new Option(text,value);
我寫的一個(gè)級(jí)聯(lián)下拉列表：
代碼如下：
<!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>
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>
您可能感興趣的文章:
- js實(shí)現(xiàn)下拉列表選中某個(gè)值的方法(3種方法)
- jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- jquery+json 通用三級(jí)聯(lián)動(dòng)下拉列表
- javaScript年份下拉列表框內(nèi)容為當(dāng)前年份及前后50年
- js獲取下拉列表框<option>中的value和text的值示例代碼
- javascript實(shí)現(xiàn)在下拉列表中顯示多級(jí)樹形菜單的方法
- extJs 文本框后面加上說明文字+下拉列表選中值后觸發(fā)事件
- javascript獲取下拉列表框當(dāng)中的文本值示例代碼
- 使用js實(shí)現(xiàn)一個(gè)可編輯的select下拉列表
- JavaScript實(shí)現(xiàn)下拉列表效果
相關(guān)文章
這篇文章主要介紹了javascript格式化json顯示,實(shí)例分析了javascript操作json格式化的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片淡入淡出效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作
這篇文章主要介紹了javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作，分別可以實(shí)現(xiàn)點(diǎn)擊之后排序和還原，和排升序和降序的功能，文章末尾附完整代碼，感興趣的小伙伴們可以參考一下2015-11-11![編寫跨瀏覽器的javascript代碼必備[js多瀏覽器兼容寫法]](http://img.jbzj.com/images/xgimg/bcimg3.png)
編寫跨瀏覽器的javascript代碼必備[js多瀏覽器兼容寫法]
下面比較了幾種瀏覽器之間的差異，在寫javascript代碼時(shí) 要時(shí)刻注意這些差異2008-10-10
微信小程序使用wx.navigateTo路由跳轉(zhuǎn)層級(jí)限制問題小結(jié)
在微信小程序開發(fā)中,wx.navigateTo和wx.redirectTo是兩種頁(yè)面跳轉(zhuǎn)方式,wx.navigateTo允許跳轉(zhuǎn)到新頁(yè)面并保留當(dāng)前頁(yè)面,適合需要返回的場(chǎng)景,但受頁(yè)面棧10層限制,wx.redirectTo則關(guān)閉當(dāng)前頁(yè)面后跳轉(zhuǎn),本文介紹微信小程序使用wx.navigateTo路由跳轉(zhuǎn)層級(jí)限制問題2024-10-10
JS生態(tài)系統(tǒng)加速Tailwind?CSS工作原理探究
這篇文章主要為大家介紹了JS?生態(tài)系統(tǒng)加速Tailwind?CSS使用及工作原理探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
這篇文章主要介紹了JS如何阻止用戶多次提交,需要的朋友可以參考下2014-03-03
因?yàn)橐鲆粋€(gè)日歷控件,遇到國(guó)家法定節(jié)假日,怎么實(shí)現(xiàn)此功能呢?這篇文章主要給大家介紹了關(guān)于前端判斷節(jié)假日的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
微信小程序picker組件簡(jiǎn)單用法示例【附demo源碼下載】
這篇文章主要介紹了微信小程序picker組件簡(jiǎn)單用法,結(jié)合實(shí)例形式詳細(xì)分析了picker組件的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-12-12
video.js 實(shí)現(xiàn)視頻只能后退不能快進(jìn)的思路詳解
這篇文章主要介紹了video.js 實(shí)現(xiàn)視頻只能后退不能快進(jìn)的思路詳解，主要思路是點(diǎn)擊進(jìn)度條需要獲取拖動(dòng)前的時(shí)間點(diǎn)，具體實(shí)例代碼大家跟隨小編一起看看吧2018-08-08