當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
HTML/CSS——form表单select联动（JavaScript方法）
生活随笔
收集整理的這篇文章主要介紹了
HTML/CSS——form表单select联动（JavaScript方法）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
下拉列表：二級聯動菜單
Select對象的常用屬性
options[]：返回所有option組成的一個數組；
name：名稱
value：option的value的值
length：設置或讀取option的個數
selectedIndex：當前選中的option的索引號
option對象的常用屬性
text：指<option></option>中的文本
value：指option對象的value屬性
index：指每個option對象的索引號
selected：當前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 = [["請選擇城市/地區"],["東城區","西城區","朝陽區","宣武區","昌平區","大興區","豐臺區","海淀區"],['寶山區','長寧區','豐賢區', '虹口區','黃浦區','青浦區','南匯區','徐匯區','盧灣區'],['和平區', '河西區', '南開區', '河北區', '河東區', '紅橋區', '塘古區', '開發區'],['俞中區', '南岸區', '江北區', '沙坪壩區', '九龍坡區', '渝北區', '大渡口區', '北碚區'],['福田區', '羅湖區', '鹽田區', '寶安區', '龍崗區', '南山區', '深圳周邊'],['廣州市','惠州市','汕頭市','珠海市','佛山市','中山市','東莞市'],['鄭州市']];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;// 默認進來高度清零oCity.length = 0;// 指定城市下拉的高度initCity(_this);};// 初始化下拉列表init();// init selectfunction init(){var index = 0;// 指定下拉的高度oProvince.length = arr_province.length;// 循環數組, 把內容寫到下拉列表中去for( var i = 0; i < arr_province.length; i++ ){oProvince.options[i].text = arr_province[i];oProvince.options[i].value = arr_province[i];}// 指定默認索引號oProvince.selectedIndex = index;// 指定城市下拉的高度initCity(index);}// 城市下拉內容高度function initCity(index){// 指定城市下拉的高度oCity.length = arr_city[index].length;// 循環數組, 把內容寫到下拉列表中去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>?
總結
以上是生活随笔為你收集整理的HTML/CSS——form表单select联动（JavaScript方法）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 酷Q 小i——添加应用
- 下一篇： JS特效——鼠标跟随特效——动态背景线条