當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
HTML/CSS——form表单select联动（JavaScript方法）
生活随笔
收集整理的這篇文章主要介紹了
HTML/CSS——form表单select联动（JavaScript方法）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
下拉列表：二級聯(lián)動菜單
Select對象的常用屬性
options[]：返回所有option組成的一個數(shù)組；
name：名稱
value：option的value的值
length：設(shè)置或讀取option的個數(shù)
selectedIndex：當(dāng)前選中的option的索引號
option對象的常用屬性
text：指<option></option>中的文本
value：指option對象的value屬性
index：指每個option對象的索引號
selected：當(dāng)前option是否選中
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>form表單之select操作</title> <script type="text/javascript"> var arr_province = ["請選擇省/城市","北京市","上海市","天津市","重慶市","深圳市","廣東省","河南省"]; var arr_city = [["請選擇城市/地區(qū)"],["東城區(qū)","西城區(qū)","朝陽區(qū)","宣武區(qū)","昌平區(qū)","大興區(qū)","豐臺區(qū)","海淀區(qū)"],['寶山區(qū)','長寧區(qū)','豐賢區(qū)', '虹口區(qū)','黃浦區(qū)','青浦區(qū)','南匯區(qū)','徐匯區(qū)','盧灣區(qū)'],['和平區(qū)', '河西區(qū)', '南開區(qū)', '河北區(qū)', '河?xùn)|區(qū)', '紅橋區(qū)', '塘古區(qū)', '開發(fā)區(qū)'],['俞中區(qū)', '南岸區(qū)', '江北區(qū)', '沙坪壩區(qū)', '九龍坡區(qū)', '渝北區(qū)', '大渡口區(qū)', '北碚區(qū)'],['福田區(qū)', '羅湖區(qū)', '鹽田區(qū)', '寶安區(qū)', '龍崗區(qū)', '南山區(qū)', '深圳周邊'],['廣州市','惠州市','汕頭市','珠海市','佛山市','中山市','東莞市'],['鄭州市']];onload = function() {var oForm = document.getElementById('form1');var oProvince = oForm.children[0];var oCity = oForm.children[1];// 添加點擊 onchange 事件oProvince.onchange = function() {var _this = this.selectedIndex;// 默認(rèn)進(jìn)來高度清零oCity.length = 0;// 指定城市下拉的高度initCity(_this);};// 初始化下拉列表init();// init selectfunction init(){var index = 0;// 指定下拉的高度oProvince.length = arr_province.length;// 循環(huán)數(shù)組, 把內(nèi)容寫到下拉列表中去for( var i = 0; i < arr_province.length; i++ ){oProvince.options[i].text = arr_province[i];oProvince.options[i].value = arr_province[i];}// 指定默認(rèn)索引號oProvince.selectedIndex = index;// 指定城市下拉的高度initCity(index);}// 城市下拉內(nèi)容高度function initCity(index){// 指定城市下拉的高度oCity.length = arr_city[index].length;// 循環(huán)數(shù)組, 把內(nèi)容寫到下拉列表中去for( var i = 0; i < arr_city[index].length; i++ ){oCity.options[i].text = arr_city[index][i];oCity.options[i].value = arr_city[index][i];}}};</script> </head><body> <form id="form1">省份: <select name="province" style="width:130px;"></select>城市: <select name="city" style="width:130px;"></select> </form> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的HTML/CSS——form表单select联动（JavaScript方法）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 酷Q 小i——添加应用
- 下一篇： JS特效——鼠标跟随特效——动态背景线条