`

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

javascripthtml 
阅读更多
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>
0
顶
0
踩
分享到：
| httpclient 3.1和4.1 请求的区别
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript四级级联下拉菜单

    JavaScript四级级联下拉菜单是一种常见的网页交互设计，它允许用户在多个下拉菜单中进行选择，逐级筛选出最终的选项。这种设计通常用于表示层次结构的数据，如国家、省份、城市和区域等地理信息，也可以应用于其他...

    JavaScript级联下拉特效制作

    在网页开发中，级联下拉菜单是一种常见的交互设计，它允许用户在选择一个选项后，根据该选项的值动态加载下一个下拉菜单的内容。这种效果可以用来展示层级关系的数据，比如国家、省份、城市这样的地理信息。在这个...

    java web下开发二级级联下拉菜单（数据库实现的）

    在Java Web开发中，二级级联下拉菜单是一种常见的用户界面元素，用于提供层次结构的选择。这个场景中，我们利用数据库存储数据，并通过后端处理逻辑动态生成这些下拉菜单。下面将详细介绍如何使用MySQL数据库来实现...

    jsp版AJAX下拉条级联

    【标题】"jsp版AJAX下拉条级联"是一个基于Java Server Pages（JSP）技术，利用AJAX实现的动态下拉菜单级联效果的项目。在网页表单中，这种功能通常用于地理信息的选择，例如省份选择后，城市会自动更新为对应省份的...

    级联菜单修改 js css

    在网页设计中，级联菜单（Cascading Menu）是一种常见的交互元素，它通常用于创建层级结构清晰的导航系统。这种菜单在用户界面上显示为一个主菜单项，当用户悬停或点击时，会下拉展示子菜单项。级联菜单能够有效地...

    AJAX实例的级联菜单

    1. 创建HTML结构，包括两个或多个级联的下拉菜单。 2. 使用JavaScript（如jQuery或其他库）监听第一个菜单的选择事件。 3. 当选择改变时，发送AJAX请求到服务器，传递选定的主类别ID。 4. PHP后端接收到请求，根据ID...

    云菜单 级联菜单 简单实用，可随意添加和删除菜单个数

    级联菜单，又称为下拉菜单或子菜单，是一种常见的UI设计模式。它在主菜单项下展示相关子菜单，通过鼠标悬停或点击触发，有助于节省页面空间，尤其是在有大量菜单选项时。级联菜单在云菜单中扮演着关键角色，允许用户...

    javascript中的级联插件

    这种插件能够帮助用户在多个关联的下拉菜单中进行逐级选择，如国家-省份-城市这样的层级关系，或者类别-子类别-具体项等。通过级联插件，我们可以更高效地处理和展示大量具有层级关系的数据。 在JavaScript中实现...

    javascirpt 级联下拉列表类

    JavaScript 级联下拉列表是一种常见的前端交互设计，它允许用户在选择一个选项后，根据该选项的值动态更新第二个或更多的下拉列表。这种功能在数据层级关系明确、需要用户逐步选择的情况下非常有用，比如省份-城市-...

    城市级联菜单

    它允许用户在多个关联的下拉菜单中逐级选择，例如先选择国家，然后是省份，接着是城市，以此类推，形成一个完整的地理位置路径。这样的设计既节省空间，又提高了用户操作的效率。 在实现城市级联菜单时，通常会涉及...

    jQuery实现的多级级联下拉列表

    在网页设计中，级联下拉列表是一种常见的交互元素，它允许用户在多个下拉菜单之间建立关联，根据前一个菜单的选择动态更新后一个菜单的内容。这种功能在数据过滤、地区选择、分类导航等场景中非常实用。本教程将深入...

    jQuery 级联下拉列表(修正版)

    在网页开发中，级联下拉列表是一种常见的交互设计，它允许用户在多个下拉框之间建立联动关系，通常用于地区选择（如省市区）、部门结构等场景。本知识点主要聚焦于使用jQuery实现的级联下拉列表，特别是修正版的实现...

    struts2 级联菜单

    在Struts2中实现级联菜单是一项常见的需求，通常用于构建复杂的下拉选择框，使得用户能够逐级选择相关选项。级联菜单在数据表关联或者层级结构的展示中非常实用，例如地区选择、部门分类等。 首先，我们需要理解...

    级联菜单级联菜单

    级联菜单，也称为下拉菜单或嵌套菜单，是用户界面设计中常见的交互元素，尤其在网页和应用程序中广泛使用。它允许用户通过点击一个主菜单项来展开一系列相关子菜单，以此来访问深层的功能或信息。这种设计有助于节省...

    Ajax-级联菜单

    在Web开发中，Ajax被广泛用于实现动态交互效果，比如级联菜单就是一种常见的应用场景。级联菜单允许用户逐级选择，通常在下拉框中展示，每次选择一个类别后，下一个级别的选项会根据上一级的选择动态加载。 级联...

    级联下拉列表

    这种设计允许用户从一个下拉菜单中选择一个选项，然后根据所选的选项动态更新另一个下拉菜单的内容。这样的交互方式提高了用户体验，因为用户可以更直观地找到并选择他们需要的特定数据。 在实现级联下拉列表时，...

    Ajax实现java web 中下拉列表二级联动

    在Java Web开发中，二级联动下拉列表是一种常见的交互功能，通常用于地区选择、类别分类等场景。这个功能使得用户在选择一级选项时，二级选项会动态更新，提供相关的子选项。Ajax（Asynchronous JavaScript and XML...

    Ajax (jQuery) 全国城市三级级联菜单插件

    总之，这个Ajax (jQuery) 全国城市三级级联菜单插件利用了Ajax的异步特性，结合jQuery的强大功能，为用户提供了一种流畅的、无需刷新页面的多级选择体验。对于任何需要处理地区选择的网站或应用来说，都是一个实用且...

    AJAX_ASP_ACCESS_级联菜单

    5. **联动下拉菜单**：这是级联菜单的另一种表述，指的是当用户在一个下拉菜单中做出选择时，另一个相关的下拉菜单会根据所选内容动态更新其选项，提供更具体的筛选条件。 实现这个功能的具体步骤可能包括以下几点...

    javascript多级菜单（三种）.rar

    在JavaScript编程中，创建多级菜单是一个常见的需求，特别是在网页设计和开发中。这个压缩包“javascript多级菜单（三种）.rar”包含了三个不同的示例，分别使用不同的方法来实现这一功能。以下是对这三个实现方式的...

Magicbox
Global site tag (gtag.js) - Google Analytics