Home > Article > Web Front-end > js code to realize three-level linkage

js code to realize three-level linkage

不言Original: 2018-08-23 14:01:251901browse

The content of this article is about the code for realizing three-level linkage in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<!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>

Related recommendations:

How to generate QR code with js? js method to generate QR code (code)

javascript realizes code sharing of provincial and municipal linkage

The above is the detailed content of js code to realize three-level linkage. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to generate QR code in js? How to generate QR code using js (code)Next article：How to generate QR code in js? How to generate QR code using js (code)

See more

js code to realize three-level linkage

Related articles