二级联动

最新推荐文章于 2023-06-19 09:20:03 发布

vic868

最新推荐文章于 2023-06-19 09:20:03 发布

阅读量591

点赞数

分类专栏： js

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.最常见的二级联动为省份和城市之间的联动
例如：
-------------------------------------------------
<body>
   省份：
   <select id="province" name="province">
       <option value="0">--请选择--</option>
       <option value="1">北京</option>
       <option value="2">山东</option>
       <option value="3">湖北</option>
   </select>
   城市：
   <select id="city" name="city">
       <option value="">--请选择--</option>
   </select>
</body>
----------------------------------------------
2.可以用标签的onchange事件来触发联动，

定义和用法
option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。

注释：数组中的每个元素对应一个 <option> 标签 - 由 0 起始。

语法
selectObject.options[]说明
options[] 集合并非一个普通的 HTMLcollection。为了和早期的浏览器向后兼容，这个集合有某种特殊的行为：允许通过 Select 对象来改变显示的选项：

如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。
如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。
可以通过构造函数 Option() 来创建一个新的 option 对象（需要设置 options.length 属性）。

document.getElementById("province").οnchange=function() {
               var os = this.options;
               for(var i = 0;i<os.length;i++){
                   alert(os[i].value);
}

<script type="text/javascript">
       window.οnlοad=function(){
           var citys = initData();//初始化数据
           document.getElementById("province").οnchange=function(){
               //根据省份的变化，改变城市的列表值
               var provinceValue = this.value;
               //取citys数组中对应索引位置上的元素
               var cs = citys[provinceValue];

               //添加前：初始化为请求选择
               document.getElementById("city").options.length=0;
               var pleaseSelectOp = new Option("--请选择--","");
               document.getElementById("city").add(pleaseSelectOp);

               //给第二个city下拉选择框，添加option元素：HTML DOM编程
               for(var i=0;i<cs.length;i++){
                   var op = new Option(cs[i],cs[i]);
                   document.getElementById("city").add(op);
               }
           }
       }

       function initData(){
           var citys = new Array();
           citys[1] = new Array("朝阳区","海淀区","昌平区");
           citys[2] = new Array("济南","青岛","淄博");
           citys[3] = new Array("武汉","襄樊","荆州");
           return citys;
       }


   </script>