二级联动实现

来源：互联网发布：迅捷数据恢复注册问题编辑：程序博客网时间：2024/05/18 00:50

html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>基本选择器</title>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />   <meta name="author" content="" />   <meta name="keywords" content="" />   <meta name="description" content="" />   <style type="text/css">    .selection{      margin: 0 auto;      padding: 0;      border:1px solid red;      width: 500px;      text-align: center;      margin-top: 50px;    }   </style>   <script type="text/javascript" src="liandong.js"></script></head><body onload="init()">   <div class="selection">     <form name="form1" >       省份：<select name="provice" onchange="change(this.selectedIndex)"></select>       城市：<select name="city"></select>     </form>   </div></body></html>

外部js页面

//定义全局变量 省份 城市var arr_province;var arr_city;function init(){ // alert(1);  //初始化  arr_province = ["请选择省份/直辖市","北京","上海","广州","深圳"];  arr_city=["请选择城市",["朝阳区","宣武区","五棵松","西直门"],["徐汇","闵行","奉贤","静安"],["荔湾区","越秀区","海珠区","天河区"],["罗湖区","宝安区","龙岗区","盐田区"]];    var provice = document.form1.provice;  var len1 = arr_province.length;  provice.length = len1;    var index1 = 0;  provice.selectedIndex = index1;  //将省份循环写入  for(var i=0;i<len1;i++){    provice.options[i].value = arr_province[i];    provice.options[i].text =  arr_province[i];  }  var city = document.form1.city;  var len2 = arr_city.length;  city.length = len2;  var index2 = 0;  city.selectedIndex = index2;  //将省份循环写入  for(var i=0;i<len1;i++){    city.options[i].value = arr_city[i];    city.options[i].text =  arr_city[i];  }}function change(index){  var city = document.form1.city;    var len3 = arr_city[index].length;  city.length = len3;  //将城市写入    //将省份循环写入  for(var i=0;i<arr_city.length;i++){    city.options[i].value = arr_city[index][i];    city.options[i].text =  arr_city[index][i];  }  }

select对象属性：
options[index]：可以访问到每一个<option>标记。
selectedIndex：默认<option>的索引值。索引值从0开始编号。
length：读取或设置<select>标记中<option>标记的个数。添加空的<option>标记。
name：元素名称
option对象属性
text：指<option>和</option>之间的文本。
value：指<option value = “值”>的value的值。

阅读全文

0 0