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

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值