欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js实现三级联动的代码

程序员文章站 2022-03-27 12:31:21
...
本篇文章给大家带来的内容是关于js实现三级联动的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
省:
<select id="sname">
    <option>—请选择—</option>
</select>
市:
<select id="s_city">
    <option>—请选择—</option>
</select>
区:
<select id="q_name">
    <option>—请选择—</option>
</select>
<script>
     var sheng=["陕西省","四川省"];
     var city=[
           ["西安市","渭南市","宝鸡市"],
           ["成都市","绵阳市"]
     ]
    var qu=[
            [
                ["莲湖区","雁塔区","长安区"],
                ["渭南1区","渭南2区","渭南3区"],
                ["成仓区","金台区","高新区"],
            ],
            [
                    ["成都1区","成都2区","成都3区"],
                    ["绵阳1区","绵阳2区","绵阳3区"]
            ]
    ]   //先获取
    var s=document.getElementById("sname");
    var s_city=document.getElementById("s_city");
    var q_name=document.getElementById("q_name");    //for循环使js里的sheng元素添加到s里
    for(var i=0;i<sheng.length;i++)
    {
        var option=new Option(sheng[i],i);
        s.appendChild(option);
    }    //选择事件
     var qucity;
     s.onchange=function (){
         s_city.options.length=1;
         q_name.options.length=1;
         var index=this.value;
         var shi=city[index];
         qucity=qu[index];
         for(var i=0;i<shi.length;i++)
         {
            var option=new Option(shi[i],i);
             s_city.appendChild(option)
         }
     }
     s_city.onchange=function (){
         q_name.options.length=1;
         var index=this.value;
         var squ=qucity[index];
         for(var i=0;i<squ.length;i++)
         {
            var option=new Option(squ[i],i);
             q_name.appendChild(option);
         }
     }
</script>
</body>
</html>

相关推荐:

js如何生成二维码?js生成二维码的方法(代码)

javascript实现省市联动的代码分享

以上就是js实现三级联动的代码的详细内容,更多请关注其它相关文章!

相关标签: js