通过JS实现省市二级联动效果

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title></title>

        <script type="text/javascript">

            var  pros = new Array() //新建省份数组

            pros[0] = "请选择省份" //给省份数组赋值

            pros[1] = "江苏" // 给省份数组赋值

            pros[2] = "浙江" //给省份数组赋值

            pros[3] = "重庆" //给省份数组赋值

            var citys = new Array()

            citys[0] = new Array("请选择城市") //新建城市数组

            citys[1] = new Array("南京","无锡","苏州") //给城市数组赋值

            citys[2] = new Array("杭州","南通","宁波") //给城市数组赋值

            citys[3] = new Array("合川","铜梁","渝北") //给城市数组赋值

            function changepro()

            {

                var prov = document.getElementById("prov") //获取省份下拉框对象

                clear(); //清除城市下拉框原有对象

                setCitys(prov.selectedIndex) //根据选择的不同省份添加城市

            }

            function setCitys(count)

            {

                var city = document.getElementById("citys") //获取城市下拉框

                var option = null;

                for(var  i = 0 ; i < citys[count].length ; i++)

                {

                    option = document.createElement("option") //创建选项对象

                    option.text = citys[count][i] //设置选项的值

                    city.options.add(option) //将选项添加到下拉框中

                }

            }

            function clear()

            {

                var city = document.getElementById("citys") //获取城市下拉框对象

                var count = city.options.length //获取城市下拉框的数量

                for(var i = 0 ; i < count ; i++)

                {

                    city.options.remove(0)

                } //清除目前所有下拉框

            }

            function init()

            {

                 var prov = document.getElementById("prov")//获取省份下拉框对象

                 var option1 = document.createElement("option")//创建一个可选项

                 var option2 = document.createElement("option")//创建一个可选项

                 var option3 = document.createElement("option")//创建一个可选项

                 var option4 = document.createElement("option")//创建一个可选项

                 option1.text = pros[0]//为第一个选项赋值

                 option2.text = pros[1]//为第二个选项赋值

                 option3.text = pros[2]//为第三个选项赋值

                 option4.text = pros[3]//为第四个选项赋值        

                 prov.options.add(option1)//向下拉框添加选项

                 prov.options.add(option2)//向下拉框添加选项

                 prov.options.add(option3)//向下拉框添加选项

                 prov.options.add(option4)//向下拉框添加选项

                 setCitys(0)//添加城市框的第一个数据

            }//初始化界面,给下拉框中添加初始值,包括省份框中的4个数据和城市框中的第一个数据

        </script>

    </head>

   

<body οnlοad="init()">

    <select id="prov" οnchange="changepro()">

    </select>

    <select id="citys">

    </select>

</body>

</html>

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值