JavaScript---二级联动和三级联动

最新推荐文章于 2024-04-26 20:21:12 发布

机智的frank

最新推荐文章于 2024-04-26 20:21:12 发布

阅读量793

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/jian15093532273/article/details/79894528

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

二级联动

 <head>
  <script type="text/javascript">
    function demo(){
        var arr=[
            ["选择城市"],
            ["海定区","朝阳区","丰台区","通州区"],
            ["浦东区","闸北区","上海滩"],
            ["郑州市","开封市","洛阳市","平顶山市","新乡市"]
        ];
        //获取两个下拉框
        var s1Node=document.getElementById("s1Node");
        var s2Node=document.getElementById("s2Node");
        //获取第一个下拉框选择的位置
        var index=s1Node.selectedIndex;
        //根据选择的位置,去容器中查找对应的内容
        var list=arr[index];
        //完成清除动作
        s2Node.length=1;
        //遍历容器
        for(var x=0;x<list.length;x++){
            //建立option选项
            var opNode=document.createElement("option");
            opNode.innerHTML=list[x];
            //把创建的option添加到下拉框2中
            s2Node.appendChild(opNode);

        }
    }
  </script>
 </head>
 <body>
    <select onchange="demo();" id="s1Node">
        <option>选择省市</option>
        <option>北京市</option>
        <option>上海市</option>
        <option>河南省</option>
    </select>
    <select id="s2Node">
        <option>选择城市</option>
    </select>
 </body>

三级联动

 <head>
   <script type="text/javascript">
    function demo(){
        var arr=[
            ["选择城市"],
            ["海定区","朝阳区","丰台区","通州区"],
            ["浦东区","闸北区","上海滩"],
            ["郑州市","开封市","洛阳市","平顶山市","新乡市"]
        ];
        //获取两个下拉框
        var s1Node=document.getElementById("s1Node");
        var s2Node=document.getElementById("s2Node");
        //获取第一个下拉框选择的位置
        var index=s1Node.selectedIndex;
        //根据选择的位置,去容器中查找对应的内容
        var list=arr[index];
        //完成清除动作
        s2Node.length=1;
        //遍历容器
        for(var x=0;x<list.length;x++){
            //建立option选项
            var opNode=document.createElement("option");
            opNode.innerHTML=list[x];
            //把创建的option添加到下拉框2中
            s2Node.appendChild(opNode);

        }
    }
    function demo2(){
        var array1=[
            ['选择县区'],
            ['海淀一区','海淀二区','海淀三区'],
            ['朝阳一区','朝阳二区','朝阳三区','朝阳四区'],
            ['丰台一区','丰台二区'],
            ['通州一区'],
        ];
        var array2=[
            ['选择县区'],
            ['浦东新区','浦东老区','浦东二区'],
            ['闸北一区','闸北二区'],
            ['上海滩一区']
        ];
        //获取三个下拉框
        var s1Node=document.getElementById("s1Node");
        var s2Node=document.getElementById("s2Node");
        var s3Node=document.getElementById("s3Node");
        //获取下拉框1和下拉框2选择的位置
        var index1=s1Node.selectedIndex;
        var index2=s2Node.selectedIndex;
        s3Node.length=1;
        //判断你选择的是哪个城市
        if(index1==1){
            //去array1中查找对应的内容
            var tt=array1[index2];
            //遍历容器
            for (var x=0;x<tt.length ;x++ )
            {
                var opNode=document.createElement("option");
                opNode.innerHTML=tt[x];
                s3Node.appendChild(opNode);
            }
        }
        else if(index1==2){
            //去array2中查找对应的内容
            var tt=array2[index2];
            //遍历容器
            for (var x=0;x<tt.length ;x++ )
            {
                var opNode=document.createElement("option");
                opNode.innerHTML=tt[x];
                s3Node.appendChild(opNode);
            }
        }
    }
  </script>
 </head>
 <body>
    <select onchange="demo();" id="s1Node">
        <option>选择省市</option>
        <option>北京市</option>
        <option>上海市</option>
        <option>河南省</option>
    </select>
    <select onchange="demo2();" id="s2Node">
        <option>选择城市</option>
    </select>
    <select id="s3Node">
        <option>选择县区</option>
    </select>
 </body>

机智的frank

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript---二级联动和三级联动

二级联动 &lt;head&gt; &lt;script type="text/javascript"&gt; function demo(){ var arr=[ ["选择城市"], ["海定区","朝阳区","丰台区","通州区"], ["浦
复制链接

扫一扫