javascript級聯(lián)下拉列表實例代碼(自寫)
更新時間：2013年05月10日 15:17:22 作者：
javascript下拉菜單想必大家在瀏覽網(wǎng)頁的時候都會看到吧，已不是那么陌生了，本文介紹使用javascript實現(xiàn)級聯(lián)下拉列表實例，感興趣的朋友可以參考下哈，希望對你有所幫助
Html dom 是指在w3c規(guī)范出現(xiàn)之前，各個瀏覽器支持的一些dom操作。
1，Select對象。
屬性
a,selectedIndex:用戶選擇的選項的下標(biāo)，下標(biāo)從0開始
b,length: 獲取或者設(shè)置選項的個數(shù)
c,options: 返回一個數(shù)組，數(shù)組元素是Option對象
2，Options對象
屬性：
a,text:選項的文本內(nèi)容
b,value:選項的値
c,selected: 當(dāng)該選項被選上，值為true，否則為false
小知識：創(chuàng)建一個Option對象
var op=new Option(text,value);
我寫的一個級聯(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ù)英語', 'english1'),
new Option('英美文學(xué)', 'english2') ];
arr[2] = [ new Option('網(wǎng)格計算', 'computer1'),
new Option('計算機軟件', 'computer2'),
new Option('圖形計算', '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">--英語--</option>
<option value="computer">--計算機--</option>
</select> <select name="s2" id="s2" style="width:120px;">
<option value="-1">--研究方向--</option>
</select> <input type="submit" value="確認" />
</form>
</div>
</div>
</body>
</html>
1，Select對象。
屬性
a,selectedIndex:用戶選擇的選項的下標(biāo)，下標(biāo)從0開始
b,length: 獲取或者設(shè)置選項的個數(shù)
c,options: 返回一個數(shù)組，數(shù)組元素是Option對象
2，Options對象
屬性：
a,text:選項的文本內(nèi)容
b,value:選項的値
c,selected: 當(dāng)該選項被選上，值為true，否則為false
小知識：創(chuàng)建一個Option對象
復(fù)制代碼 代碼如下:
var op=new Option(text,value);
我寫的一個級聯(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ù)英語', 'english1'),
new Option('英美文學(xué)', 'english2') ];
arr[2] = [ new Option('網(wǎng)格計算', 'computer1'),
new Option('計算機軟件', 'computer2'),
new Option('圖形計算', '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">--英語--</option>
<option value="computer">--計算機--</option>
</select> <select name="s2" id="s2" style="width:120px;">
<option value="-1">--研究方向--</option>
</select> <input type="submit" value="確認" />
</form>
</div>
</div>
</body>
</html>
您可能感興趣的文章:
- js實現(xiàn)下拉列表選中某個值的方法(3種方法)
- jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- jquery+json 通用三級聯(lián)動下拉列表
- javaScript年份下拉列表框內(nèi)容為當(dāng)前年份及前后50年
- js獲取下拉列表框<option>中的value和text的值示例代碼
- javascript實現(xiàn)在下拉列表中顯示多級樹形菜單的方法
- extJs 文本框后面加上說明文字+下拉列表選中值后觸發(fā)事件
- javascript獲取下拉列表框當(dāng)中的文本值示例代碼
- 使用js實現(xiàn)一個可編輯的select下拉列表
- JavaScript實現(xiàn)下拉列表效果
相關(guān)文章
這篇文章主要介紹了javascript格式化json顯示,實例分析了javascript操作json格式化的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片淡入淡出效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了javascript實現(xiàn)對表格元素進行排序操作，分別可以實現(xiàn)點擊之后排序和還原，和排升序和降序的功能，文章末尾附完整代碼，感興趣的小伙伴們可以參考一下2015-11-11![編寫跨瀏覽器的javascript代碼必備[js多瀏覽器兼容寫法]](http://img.jbzj.com/images/xgimg/bcimg3.png)
編寫跨瀏覽器的javascript代碼必備[js多瀏覽器兼容寫法]
下面比較了幾種瀏覽器之間的差異，在寫javascript代碼時 要時刻注意這些差異2008-10-10
微信小程序使用wx.navigateTo路由跳轉(zhuǎn)層級限制問題小結(jié)
在微信小程序開發(fā)中,wx.navigateTo和wx.redirectTo是兩種頁面跳轉(zhuǎn)方式,wx.navigateTo允許跳轉(zhuǎn)到新頁面并保留當(dāng)前頁面,適合需要返回的場景,但受頁面棧10層限制,wx.redirectTo則關(guān)閉當(dāng)前頁面后跳轉(zhuǎn),本文介紹微信小程序使用wx.navigateTo路由跳轉(zhuǎn)層級限制問題2024-10-10
JS生態(tài)系統(tǒng)加速Tailwind?CSS工作原理探究
這篇文章主要為大家介紹了JS?生態(tài)系統(tǒng)加速Tailwind?CSS使用及工作原理探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
這篇文章主要介紹了JS如何阻止用戶多次提交,需要的朋友可以參考下2014-03-03
因為要做一個日歷控件,遇到國家法定節(jié)假日,怎么實現(xiàn)此功能呢?這篇文章主要給大家介紹了關(guān)于前端判斷節(jié)假日的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
微信小程序picker組件簡單用法示例【附demo源碼下載】
這篇文章主要介紹了微信小程序picker組件簡單用法,結(jié)合實例形式詳細分析了picker組件的功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-12-12
video.js 實現(xiàn)視頻只能后退不能快進的思路詳解
這篇文章主要介紹了video.js 實現(xiàn)視頻只能后退不能快進的思路詳解，主要思路是點擊進度條需要獲取拖動前的時間點，具體實例代碼大家跟隨小編一起看看吧2018-08-08