您的位置：首页 > Web前端 > JavaScript

javascript中几种常见的多个下拉菜单的级联

2014-03-06 14:28 218 查看

1、使用数组


<html>

<head>

<title></title>

</head>

<body>[align=center" >

<select name="sheng" id="sheng" onchange="change()]

                    <option selected="selected">请选择一个学期</option>

                    <option value="第一学期">第一学期</option>

                    <option value="第二学期">第二学期</option>



                </select>

                <select name="shi" id="shi" onchange="change2(this.value)">

                    <option>请选择学科</option>

                </select>

                 <select name="qu" id="qu">

                    <option>请选择章节</option>

                </select>







[/align]

<script>

var arr=new Array();



    arr['第一学期']=['请选科目','历史','数学'];

    arr['第二学期']=['语文','外语'];



    arr['历史']=['历史1','历史2'];

    arr['语文']=['语文1','语文2']

        arr['数学']=['数学1','数学2'];

        arr['外语']=['外语1','外语2'];







    //窗口加载事件()

//    window.onload=function(){

//        var sheng=$("sheng");

//        sheng.options.length=0;  //清空省的列表

//        for(var i in arr){     //循环数组

//            var opt=new Option(i,i);  //创建一个option的选项

//            $("sheng").options.add(opt);  //将新创建的选项加入到省列表

//        }

//        

//    }

    //当省的值发生改变的时候触发事件：

    function change(){

   var sheng=$("sheng");



    var shi=$("shi");

    var qu=$("qu");

    shi.options.length=0;

    qu.options.length=0;

   for(var j in arr[sheng.value])

        {

            shi.options.add(new Option(arr[sheng.value][j],arr[sheng.value][j]));



        }

    }





    function change2(val){

        var shi=$("shi");

        var qu =$("qu");

           qu.options.length=0;

        for(var j in arr[val])

        {            qu.options.add(new Option(arr[val][j],arr[val][j]));

        }

    }


      function $(obj){

     return document.getElementById(obj);

    }


</script>

</body>



</html>

2、结合第一点

2.结合xml 


<html>



<head>



<title></title>

<script>

function getXmlDoc(){

        var xmlDoc;

        try{

            xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

        }catch(err){

         xmlDoc=document.implementation.createDocument("","",null);  

        }

        return xmlDoc;

    }

var xmlDoc;

var sheng;

var shi;

var qu  ;

//定义一个方法，用于初始化数据，从1.xml中加载数据

function init(){

 sheng=$("sheng");

shi=$("shi");

   qu=$("qu"); 

xmlDoc=getXmlDoc();

xmlDoc.async=false;

xmlDoc.load("1.xml");

}



function $(obj){

return document.getElementById(obj);

}



//窗口加载事件 

window.onload=function(){

init();

sheng.options.length=0;//先将下拉列表长度清空

var root=xmlDoc.documentElement;//取出xml文档中的根节点

 var ps=root.childNodes;//取出省的子节点列表

//循环

for(var i=0;i<ps.length;i++){

 if(ps[i].nodeType==1){



//alert(ps[i].nodeName+"   "+ps[i].nodeType);


//取出属性值

var attvalue=ps[i].getAttribute("pname");

//构建option对象

var option=new Option(attvalue,attvalue);

//将option放入到省的下拉列表中

sheng.options.add(option);

}

     }  



        //省的onchange事件绑定一个函数

     sheng.onchange=showcity;

     showcity();



     shi.onchange=showqu;

     showqu();

        }





     function showcity(){

         shi.options.length=0; //清空市的下拉列表

qu.options.length=0;

       var pname=sheng.value; //得到省下拉列表的省名

        var root=xmlDoc.documentElement;//取出root根节点

        //循环找到root下对应的省的子节点

        var ps=root.childNodes;  //省的子节点

        for(var i=0;i<ps.length;i++){

            //取出这个省节点的pname，看是否和pnam相等

            var attrpname=ps[i].getAttribute("pname");

            if(attrpname==pname){

        //在取出这个省的节点下的市的子节点

                 var cs= ps[i].childNodes;  //这个省所有的市

                       for(var j=0;j<cs.length;j++){

                          if(cs[j].nodeType==1){

                                                                     //再用市的属性值构建option 

                                var cn= cs[j].getAttribute("cname");

                                                                     //将option添加到city下拉列表中

                                var cpt=new Option(cn,cn);

                                 shi.options.add(cpt);

             }

          } break;

      }

     }

  }



    function showqu(){

         qu.options.length=0; //清空市的下拉列表

       var pname=sheng.value; //得到省下拉列表的省名

       var sname=shi.value;   

        var root=xmlDoc.documentElement;//取出root根节点

        //循环找到root下对应的省的子节点

        var ps=root.childNodes;  //省的子节点

        for(var i=0;i<ps.length;i++){

            //取出这个省节点的pname，看是否和pnam相等

            var attrpname=ps[i].getAttribute("pname");

            if(attrpname==pname){

        //在取出这个省的节点下的市的子节点

                 var cs= ps[i].childNodes;  //这个省所有的市节点

                   for(var k=0;k<cs.length;k++){

                        var shiname=cs[k].getAttribute("cname");

                           if(shiname==sname){

                                 var qs=cs[k].childNodes;

                        for(var j=0;j<qs.length;j++){

                          if(qs[j].nodeType==1){

                                                                     //再用市的属性值构建option 

                                var cn= qs[j].getAttribute("name");

                                                                     //将option添加到city下拉列表中

                                var cpt=new Option(cn,cn);

                                 qu.options.add(cpt);

             }

          } break;

      }

     }break;

     }

  }}



























</script>



</head>



<body>

[align=center]

<select name="sheng" style="width:130px" id="sheng">

</select>省



<select name="shi"  style="width:130px" id="shi">

</select>市



<select name="qu"  style="width:130px" id="qu">

</select>区

[/align]



</body>



</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航