select 联动用到的范围很广,下面介绍一下简单的二级联动

方法/步骤

  1.  

    做一个简单的html页面,用于显示select联动,如图所示:

  2.  

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

  3.  

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

  4. 4

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

     

纯js做的select二级联动的更多相关文章

  1. jquery实现select二级联动

    jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. jQuery 1.3.2 简单实现select二级联动

    jQuery 1.3.2 简单实现select二级联动  复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  3. JS实现下拉列表的二级联动

    这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单,不刷新的联动,动态的联动需要检索数据库,这个对不需要更新的二级联动比较实用.这里 ...

  4. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  5. element-ui select 二级联动

    在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一个变化而不同)  两个输入框代码 <el-form :inline="tru ...

  6. 用纯JS做俄罗斯方块 - 简要思路介绍(1)

    大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...

  7. Struts2, jquery, select二级联动

    1. 下载jquery.js文件放在webroot下js文件夹里 2. 配置struts.xml: <package name="default" namespace=&qu ...

  8. js动态添加select菜单 联动菜单

    原文发布时间为:2009-11-14 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>http://hi.baidu.co ...

  9. 如何用纯js做一个大富翁游戏

    下面这张是效果图: 先立个flag,一个星期内把这个坑填了

随机推荐

  1. Oracle 删除用户和表空间------创建表空间和用户

    步骤一:  删除user drop user ×× cascade 说明: 删除了user,只是删除了该user下的schema objects,是不会删除相应的tablespace的. 步骤二: 删 ...

  2. 使用浏览器地址栏调用CXF Webservice的写法

    /* * 通过url调用 * http://localhost:8080/EFP/webService/TestWebservice/testOut/arg0/liuyx */ http://loca ...

  3. nightwatch-js -- test group

    Test group 可以将你的测试脚本划分到组中,并根据需要运行它们.要将测试组合在一起,只需将它们放在相同的子文件夹中,文件夹的名字即是组的名字.例如:lib/├── selenium-serve ...

  4. php函数总结(闭包函数,匿名函数)

    php函数总结 1.普通函数 2.变量函数 function myfun($a) { echo $a; } $b = "myfun"; $b("test"); ...

  5. awk.sed.grep三剑客详解

    事前准备1.主机node1:172.16.133.112.作为实验的文件/etc/passwd /etc/fstab qinqin cp /etc/passwd . cp /etc/fstab . 一 ...

  6. Xcode wifi连接真机调试

    设备环境:Mac OSX 10.12.5.iOS11.Xcode9 或以上版本 PS:这是WWDC2017的新功能,iOS11以上,Xcode9这是刚性要求.这个功能不好找,就记下来了 手机连接上Xc ...

  7. IDEA中配置svn

    反正这个命令行我是勾选了的,软件占用内存不大,我就都选了. 然后是配置IDEA 试一下效果,果然阔以,哈哈.

  8. 《TomCat与Java Web开发技术详解》(第二版) 第六章节对应CD附带的helloapp无法启动的问题解决

    首先记录一下如何解决此章节CD中附带的helloapp无法启动的问题 我用的tomcat版本是:7.0.47:为了便于控制,针对此章节的helloapp,我在tomcat/conf/Catalina/ ...

  9. iOS开发之 AES+Base64数据混合加密与解密

    2016-04-08 09:03 编辑: liubinqww 分类:iOS开发 来源:liubinqww 投稿 4 889     "APP的数据安全已经牵动着我们开发者的心,简单的MD5/ ...

  10. dede后台title怎么修改的?去掉XXXX-织梦内容管理系统V5.7

    dede后台title怎么修改的? 去掉XXXX-织梦内容管理系统V5.7 打开include/common.inc.php的文件. $cfg_version = 'V57_UTF8_SP1';(这是 ...