zoukankan      html  css  js  c++  java
  • 三级级联(js实现)

    <!DOCTYPE html>

    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>

    <!-- 实现效果:选择省会出现相应的县下拉框,同时市的下拉框改变-->
            <script type="application/javascript">    

        //二维数组存放市的信息
                var shi =[["丽水市","杭州市"],["新乡","郑州"]]; 
             //三维数组存放县的信息     

       var xianes = [[["云和","景宁"],["桐庐","原阳"]],[["卫辉","下乡"],["中原","二七"]]];
                //所选的省值

        var proIndex = 0;
                function sgc(){
                   //获得所选择的省的下拉框值

         var pro = document.getElementById("sheng");
                  //获得市的下拉框 

        var cit = document.getElementById("shi");
                  //将省的value与市的一维数组下标所对应 

        proIndex = pro.value-1;

        //清空市下拉框中原有的值
                    cit.options.length = 1;
                    //通过for循环往下拉框中添加市的信息
                    for(var i = 0;i < shi[proIndex].length;i++){
                        var op = document.createElement("option");
                        var citName = document.createTextNode(shi[proIndex][i]);
                        op.value = i;
                        op.appendChild(citName);
                        cit.appendChild(op);                    
                    }            
                }

       //市的值改变后改变县的值
                function sic(){
                    var are = document.getElementById("xian");
                    var cit = document.getElementById("shi");
                    are.options.length = 1;

        //通过proIndex获得所选的省的值作为县的数组的一维数组下标,通过cit.value作为县数组的二维数组下标,遍历获得数组值
                    for(var i = 0;i<xianes[proIndex][cit.value].length;i++){
                        var op = document.createElement("option");
                        var areName = document.createTextNode(xianes[proIndex][cit.value][i]);
                        op.value = i;
                        op.appendChild(areName);
                        are.appendChild(op);
                    }
                }
            </script>

      //onchange():控件的value值改变后调用方法
            <select id = "sheng" onchange = "sgc();">
                <option>----省份---</option>
                <option value = "1">浙江省</option>
                <option value = "2">河南省</option>
            </select>
            <select id = "shi" onchange="sic();">
                <option>---市区---</option>
            </select>
            <select id = "xian" >
                <option>---县区---</option>
            </select>
        </body>
    </html>

  • 相关阅读:
    P1113 杂务 题解
    P3916 图的遍历 题解
    P5318 【深基18.例3】查找文献 题解
    P2814 家谱 题解
    P3879 [TJOI2010]阅读理解 题解
    P4305 不重复的数字题解
    P1955 [NOI2015] 程序自动分析题解
    P1892 [BOI2003]团伙
    P1525 [NOIP2010 提高组] 关押罪犯
    【610】keras 相关问题说明
  • 原文地址:https://www.cnblogs.com/gfl123/p/7881736.html
Copyright © 2011-2022 走看看