是首先应该添加两个下拉列表并设置id属性来方便操作：

 <select id="country">

     <option>国家</option>

 </select>

 <select id="city">

     <option>城市</option>

 </select>

js代码中首先需要声明国家和城市两个数组：

var country = ['中国', '美国','英国']

var city = [

    ['北京', '上海'],

    ['纽约'],

    ['伦敦']

]

然后通过id获取页面中的下拉菜单元素：

var cou = document.getElementById("country");

var cit = document.getElementById("city");

然后初始化第一个列表：

//初始化国家下拉列表

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

    //新的option

    var option = new Option()

    //赋值

        option.appendChild(document.createTextNode(country[i]))

    //插入

    cou.appendChild(option)

}

在第一个下拉列表中选择国家后，第二个列表显示相应的城市：

//为国家下拉列表添加事件

cou.addEventListener('change', function(){

    //另城市列表变为初始状态，可以注释掉查看效果

    cit.options.length = 1;

    //如果国家选择不为默认值

    if(cou.selectedIndex != 0) {

        //遍历相应国家的城市

        for(var j = 0; j < city[cou.selectedIndex - 1].length; j++) {

            var option2 = new Option(city[cou.selectedIndex-1][j],city[cou.selectedIndex-1][j])

            cit.options.add(option2)

        }

    }

});
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <select id="country">

            <option>国家</option>

        </select>

        <select id="city">

            <option>城市</option>

        </select>

        <script>

            var country = ['中国', '美国','英国']

            var city = [

                ['北京', '上海'],

                ['纽约'],

                ['伦敦']

            ]

            var cou = document.getElementById("country");

            var cit = document.getElementById("city");

            //初始化国家下拉列表

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

                //新的option

                var option = new Option()

                //赋值

                option.appendChild(document.createTextNode(country[i]))

                //插入

                cou.appendChild(option)

            }

            //为国家下拉列表添加事件

            cou.addEventListener('change', function(){

                //另城市列表变为初始状态，可以注释掉查看效果

                cit.options.length = 1;

                //如果国家选择不为默认值

                if(cou.selectedIndex != 0) {

                    //遍历相应国家的城市

                    for(var j = 0; j < city[cou.selectedIndex - 1].length; j++) {

                        var option2 = new Option(city[cou.selectedIndex-1][j],city[cou.selectedIndex-1][j])

                        cit.options.add(option2)

                    }

                }

            });

        </script>

    </body>

</html>

完整代码

JS实现级联菜单的更多相关文章

  1. JS动态级联菜单

    JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...

  2. JS实战 · 级联菜单选择省份和城市（两种）

    DOM编程步骤.思路 1.定义界面:      通过html标签将数据进行封装: 2.定义一些静态样式:      利用css: 3.需要动态地完成的和用户的交互:      a:明确事件源:     ...

  3. js实现级联菜单（没有后台）

    html代码: <!-- js级联菜单 --> <div id="cascMenu"> <select id="select" o ...

  4. js实现“级联菜单”

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js进阶 9-12 js如何实现级联菜单 （章节测试）

    js进阶 9-12  js如何实现级联菜单 (章节测试) 一.总结 一句话总结: 1.js如何实现级联菜单 ? 二维数组,以第一级菜单的文本值做键,以对应的二级菜单选项的文本做值 2.用哪个属性可以获 ...

  6. 前台JS(Jquery)调用后台方法 无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...

  7. 使用json方式实现省市两级下拉级联菜单[原创]

    本文为博主原创,转载请注明. 首先看一下实现后的效果图: 当然,要完成这个实验,mysql必须与数据库连接,这里选用navicat for mysql这款软件,它与mysql的契合度是很高的,配置环境 ...

  8. Ajax实现动态的二级级联菜单

    今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...

  9. js省市级联实现

    js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...

随机推荐

  1. Test 1 T2 B 线段树合并

    模拟赛的T2,多敲了两行成功爆掉~ 写线段树合并的时候一定要注意一下不能随意新开节点. code: #include <bits/stdc++.h> #define N 100009 #d ...

  2. (WA)BZOJ 1503: [NOI2004]郁闷的出纳员

    二次联通门 : BZOJ 1503: [NOI2004]郁闷的出纳员 /* BZOJ 1503: [NOI2004]郁闷的出纳员 考虑这样一个事实 无论是加或减 都是针对全体人员的 那么只需要记录一个 ...

  3. python 安装 pyHook

    下载网站:https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyhook 查看python版本 C:\Users\k\Desktop\file_trans> ...

  4. 2015-2016 ACM ICPC Baltic Selection Contest

    这是上礼拜三的训练赛,以前做过一次,这次仅剩B题没补.题目链接:https://vjudge.net/contest/153192#overview. A题,水题. C题,树形DP,其实是一个贪心问题 ...

  5. intel官方的手册

    最近在学习汇编语言,需要用到intel的手册,无论是csdn还是其他的,都要下载币,还不便宜,也很老的资料了. 直接到这个地址:https://software.intel.com/en-us/art ...

  6. 5.3.4 Hadoop序列化框架

    序列化框架 除了writable实现序列化之外,只要实现让类型和二进制流相互转换,都可以作为hadoop的序列化类型,为此Hadoop提供了一个序列化框架接口,他们在org.apache.hadoop ...

  7. 走进JavaWeb技术世界1：Web后端与J2EE的由来

    转自:微信公众号 码农翻身 这个问题来自于QQ网友,一句两句说不清楚,索性写个文章. 我刚开始做Web开发的时候,根本没有前端,后端之说. 原因很简单,那个时候服务器端的代码就是一切:接受浏览器的请求 ...

  8. ajax调用c#后端，发现参数没数值

    之前是int的数据,名字是id 后面被改成字符串的数据,名字是encrptedId 因为名字不匹配,导致找不到数值.只需要把js里调用传递的参数名字改一下,或者C#后端,继续保持原来的名字

  9. [java]察看两个日期间差多少秒/小时/天

    Java 中Date类getTime()的方法返回从1970-1-1以来的毫秒数,这是下面函数运行的基础. package com.example.demo; import java.text.Par ...

  10. Antecedent Membership Functions相关资料

    属于模糊控制领域 前件隶属函数(Antecedent Membership Functions) 基于模糊近似的强化学习方法研究 - 豆丁网 https://www.docin.com/p-13022 ...