javascript使用select标签如何实现省市联动,级联下拉列表

最新推荐文章于 2024-09-06 10:47:36 发布

可C但是没有必要

最新推荐文章于 2024-09-06 10:47:36 发布

阅读量3k

点赞数 1

分类专栏： javascript 文章标签： javascript 省市联动级联下拉列表 select 下拉框

本文链接：https://blog.csdn.net/qq_33442160/article/details/81514332

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

select对象
属性：
options：获得所有的option对象,返回option的数组
selectIndex：获得当前选中项在option中的索引号
方法：
add()：用于添加新的Option对象
add(new Option(text,value,isSelected))
//第1个参数设置显示的文本
//第2个参数设置value的值
//第3个参数设置当前项是否选中
Option对象：
属性：
text：显示的文本值
value：这个值是给服务器
事件：
onchange：在选项发生改变时触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            var provinceArray;//一维数组

            /**
             * 改变省份时城市的下拉值变化
             */
            function onProvince(){
                var provinceObj=document.getElementById("province");//省
                var cityObj=document.getElementById("city");//市

                //清空cityObj下的所有option对象
                cityObj.options.length=0;

                for(var i in provinceArray){
                    //判断省份的下拉框的选中值与二维数组中的省份进行比较是否相同
                    //i广东省跟第一个下拉列表的值相等就给第二个下拉列表添加值                  if(i==provinceObj.options[provinceObj.selectedIndex].value){//options[provinceObj.selectedIndex]表示当前被选中的省份的序号,然后.value获取值
                        for(var j in provinceArray[i]){
                            //将城市添加到cityObj对象下
                            cityObj.add(new Option(provinceArray[i][j],provinceArray[i][j]));
                        }
                    }
                }
            }

            //初始化二维数组的值
            function onInit(){
                provinceArray=new Array();//一维数组
                //分别设置各省下的城市
                provinceArray["广东省"]=new Array("广州市","深圳市");
                provinceArray["广西省"]=new Array("南宁市","桂林市");

                //初始化省的下拉框的值
                var provinceObj=document.getElementById("province");
                for(var index in provinceArray){
                    //new Option(text,value,isSelected)
                    //第1个参数设置显示的文本
                    //第2个参数设置value的值
                    //第3个参数设置当前项是否选中
                    provinceObj.add(new Option(index,index));
                }
            }

            window.onload=function(){
                onInit();
            }
        </script>
    </head>
    <body>
        省：<select id="province" onchange="onProvince()"></select>
        市：<select id="city"></select>
    </body>
</html>