JS实现级联菜单
是首先应该添加两个下拉列表并设置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实现级联菜单的更多相关文章
- JS动态级联菜单
JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...
- JS实战 · 级联菜单选择省份和城市(两种)
DOM编程步骤.思路 1.定义界面: 通过html标签将数据进行封装: 2.定义一些静态样式: 利用css: 3.需要动态地完成的和用户的交互: a:明确事件源: ...
- js实现级联菜单(没有后台)
html代码: <!-- js级联菜单 --> <div id="cascMenu"> <select id="select" o ...
- js实现“级联菜单”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js进阶 9-12 js如何实现级联菜单 (章节测试)
js进阶 9-12 js如何实现级联菜单 (章节测试) 一.总结 一句话总结: 1.js如何实现级联菜单 ? 二维数组,以第一级菜单的文本值做键,以对应的二级菜单选项的文本做值 2.用哪个属性可以获 ...
- 前台JS(Jquery)调用后台方法 无刷新级联菜单示例
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...
- 使用json方式实现省市两级下拉级联菜单[原创]
本文为博主原创,转载请注明. 首先看一下实现后的效果图: 当然,要完成这个实验,mysql必须与数据库连接,这里选用navicat for mysql这款软件,它与mysql的契合度是很高的,配置环境 ...
- Ajax实现动态的二级级联菜单
今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...
- js省市级联实现
js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...
随机推荐
- 又见回文 (SDUT 2560)
Problem Description "回文串"是一个正读和反读都一样的字符串,比如"level"或者"noon"等等就是回文串.现在呢, ...
- 爬虫之解析库Xpath
简介 XPath即为XML路径语言(XML Path Language),它是一种用来确定XML文档中某部分位置的语言. XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力.起初XPat ...
- 数据分析之matplotlib使用
绘制折线图 参数详情 from matplotlib import pyplot as plt # 设置图片大小,dpi图片放大缩小时可以让其更清晰 plt.figure(figsize=(20,8) ...
- java生成zip包兼容Linux
/* 这个方法只用在windows中用服务器为Linux就不行 */ package common.util; import java.io.File;import java.io.FileInput ...
- manjaro 18.10 install soft
1.添加新账户 useradd username新建账户; useradd -d /home/xxx -m xxx创建用户,并同时生成用户目录,不然账户无法正常启用; passwd username修 ...
- elasticsearch sql插件配置(5.0及以上版本)
github官方参考地址:https://github.com/NLPchina/elasticsearch-sql/ 采用 git + node 的方式,所以安装前需要先安装好node,node n ...
- 消息中间件MQ
消息中间件MQ:为方便预览,将思维导图上传至印象笔记,博客园直接上传图片受限于图片大小 https://app.yinxiang.com/shard/s24/nl/27262531/c3e137a5- ...
- Pwnhub Fantastic Key-一点总结
index.php <? php error_reporting(0); include 'config.php'; $id = $_POST['i'] ? waf($_POST['i']) : ...
- 安装Rabbitmq脚本
安装RabbitMQ时需要先安装erlang插件 [root@ZHONG-LONG javascripts]# vim -erlang.sh #!/bin/sh ######安装erl插件 PRO=/ ...
- Python 基础学习的几个小例子
最近在研究动态脚本语言 Python , 出于对其语言精简度的喜欢及大学时期对 matlab 这样的数学领域语言的怀念, 再加上笔者是C++起家,Python中所涉及的del机制与特殊方法重载(类比于 ...