纯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,一个星期内把这个坑填了
随机推荐
- Oracle 删除用户和表空间------创建表空间和用户
步骤一: 删除user drop user ×× cascade 说明: 删除了user,只是删除了该user下的schema objects,是不会删除相应的tablespace的. 步骤二: 删 ...
- 使用浏览器地址栏调用CXF Webservice的写法
/* * 通过url调用 * http://localhost:8080/EFP/webService/TestWebservice/testOut/arg0/liuyx */ http://loca ...
- nightwatch-js -- test group
Test group 可以将你的测试脚本划分到组中,并根据需要运行它们.要将测试组合在一起,只需将它们放在相同的子文件夹中,文件夹的名字即是组的名字.例如:lib/├── selenium-serve ...
- php函数总结(闭包函数,匿名函数)
php函数总结 1.普通函数 2.变量函数 function myfun($a) { echo $a; } $b = "myfun"; $b("test"); ...
- awk.sed.grep三剑客详解
事前准备1.主机node1:172.16.133.112.作为实验的文件/etc/passwd /etc/fstab qinqin cp /etc/passwd . cp /etc/fstab . 一 ...
- Xcode wifi连接真机调试
设备环境:Mac OSX 10.12.5.iOS11.Xcode9 或以上版本 PS:这是WWDC2017的新功能,iOS11以上,Xcode9这是刚性要求.这个功能不好找,就记下来了 手机连接上Xc ...
- IDEA中配置svn
反正这个命令行我是勾选了的,软件占用内存不大,我就都选了. 然后是配置IDEA 试一下效果,果然阔以,哈哈.
- 《TomCat与Java Web开发技术详解》(第二版) 第六章节对应CD附带的helloapp无法启动的问题解决
首先记录一下如何解决此章节CD中附带的helloapp无法启动的问题 我用的tomcat版本是:7.0.47:为了便于控制,针对此章节的helloapp,我在tomcat/conf/Catalina/ ...
- iOS开发之 AES+Base64数据混合加密与解密
2016-04-08 09:03 编辑: liubinqww 分类:iOS开发 来源:liubinqww 投稿 4 889 "APP的数据安全已经牵动着我们开发者的心,简单的MD5/ ...
- dede后台title怎么修改的?去掉XXXX-织梦内容管理系统V5.7
dede后台title怎么修改的? 去掉XXXX-织梦内容管理系统V5.7 打开include/common.inc.php的文件. $cfg_version = 'V57_UTF8_SP1';(这是 ...