二级联动实现

最新推荐文章于 2021-01-19 03:15:15 发布

jlhaoran

最新推荐文章于 2021-01-19 03:15:15 发布

阅读量951

点赞数

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/haoranli/article/details/73472502

版权

HTML 专栏收录该内容

29 篇文章

订阅专栏

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 οnlοad="init()">
   <div class="selection">
     <form name="form1" >
       省份：<select name="provice" οnchange="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的值。