纯js做的select二级联动
select 联动用到的范围很广,下面介绍一下简单的二级联动
方法/步骤
做一个简单的html页面,用于显示select联动,如图所示:


设置js,点击一级选择项时,创建其下对应的二级选择项;因为是联动的,所以一级选择项变动时,要先清空,先前一级选择项下对应的所有二级选择项。

再根据要选择的一级选择项,创建对应的新的二级选择项,过程如图:


- 4
结果显示如下,选择B时,创建出三个选择项,选择C时,先清除B的所有关联的二级选择,再创建C对应的4个二级选项。


纯js做的select二级联动的更多相关文章
- jquery实现select二级联动
jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- jQuery 1.3.2 简单实现select二级联动
jQuery 1.3.2 简单实现select二级联动 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- JS实现下拉列表的二级联动
这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单,不刷新的联动,动态的联动需要检索数据库,这个对不需要更新的二级联动比较实用.这里 ...
- js小例子之二级联动
联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...
- element-ui select 二级联动
在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一个变化而不同) 两个输入框代码 <el-form :inline="tru ...
- 用纯JS做俄罗斯方块 - 简要思路介绍(1)
大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...
- Struts2, jquery, select二级联动
1. 下载jquery.js文件放在webroot下js文件夹里 2. 配置struts.xml: <package name="default" namespace=&qu ...
- js动态添加select菜单 联动菜单
原文发布时间为:2009-11-14 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>http://hi.baidu.co ...
- 如何用纯js做一个大富翁游戏
下面这张是效果图: 先立个flag,一个星期内把这个坑填了
随机推荐
- 用二十秒记住几个PHP基础知识点
数组: 索引数组:数组的键是整数的数组,从0開始. 关联数组:数组的键是字符串的数组 //索引数组 $arr=array('I','love','you'); //关联数组 $arr0=array(' ...
- PowerShell-将CSV导入SQL Server
$database = 'foxdeploy' $server = '.' $table = 'dbo.powershell_test' Import-CSV .\yourcsv.csv | ForE ...
- java调用本地默认浏览器
1 http://blog.csdn.net/casularm/article/details/3401018 2
- JSON Web Token (JWT) 实现与使用方法
1. JSON Web Token是什么 JSON Web Token (JWT)是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该 ...
- .Net 异步调用
.NET异步编程之新利器——Task与Await.Async 一. FrameWork 4.0之前的线程世界 在.NET FrameWork 4.0之前,如果我们使用线程.一般有以下几种方 ...
- 转Python 标准库 urllib2 的使用细节
Python 标准库中有很多实用的工具类,但是在具体使用时,标准库文档上对使用细节描述的并不清楚,比如 urllib2 这个 HTTP 客户端库.这里总结了一些 urllib2 库的使用细节. 1 P ...
- userService 用户 会员 系统设计 v2 q224 .doc
userService 用户 会员 系统设计 v2 q224 .doc 1. Admin login1 2. 普通用户注册登录2 2.1. <!-- 会员退出登录 -->2 2.2. & ...
- IntelliJ IDEA 2014 付费版 免费版比较
http://www.jetbrains.com/idea/features/editions_comparison_matrix.html Freemarker, Velocity IDE Feat ...
- PHP性能之语言性能优化说明
PHP语言性能优化优化啥? 如下图所示,PHP直接执行的是opcode,所以我们尽量减少扫描和转码解析. 这是我们第一个优化点,尽量使用PHP内置的函数代替我们的代码来实现同样的功能. 和我们自己写的 ...
- Linux基础知识之挂载详解(mount,umount及开机自动挂载)
Linux基础知识之挂载详解(mount,umount及开机自动挂载) 转载自:http://www.linuxidc.com/Linux/2016-08/134666.htm 挂载概念简述: 根文件 ...