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. 关于\r和\n的一些问题总结

    \r表示"回车"(carriage return).\n表示"换行"(line feed),在Windows系统下.输入回车键会自己主动变成\r\n 相同的,在 ...

  2. Ajax系列之中的一个:ajax旧貌换新颜

    什么是ajax? 什么是Ajax? Ajax就是Asynchronous +JavaScript+XML.中文翻译为:异步的javascript与XML,它是利用javascript语言和xml数据实 ...

  3. 应用沙盒(Application Sandbox)

    一.应用沙盒目录 应用沙盒包含多个目录: 1.应用程序包:(application bundle):包含所有的资源文件和可执行文件,并且是只读目录. 2.Library/Preferences/:存放 ...

  4. 如何进入到Docker容器内部

    启动Docker容器后,对应的服务(例如tomcat启动)也通过dockerfile文件命令运行起来了,这个时候如何进行容器内部观察容器的运行状态. 1.docker attach 这个命令在创建一个 ...

  5. Selenium3.14.1+Python安装和第一个Demo

    言简意赅的说下Selenium是什么 Selenium是前台测试框架,支持IE(7, 8, 9, 10, 11),Mozilla Firefox,Safari,Google Chrome等浏览器,我只 ...

  6. c# 冒号 :

    1.表示继承关系 class classA:classB 2.继承构造, 调用自己这个类的某个构造函数,因为有的类构造函数很多参数,而有的参数又不是必须填写,或者可以提供一些默认值,就跟重载是一样的道 ...

  7. Atitit.Java exe bat  作为windows系统服务程序运行

    Atitit.Java exe bat  作为windows系统服务程序运行 1. 使用SC命令+srvany.exe (不错,推荐)+net start1 1.1. First 创建一个java的运 ...

  8. 常见Linux/Unix开发辅助命令什锦

    很多零碎命令集锦: 1. 怎样通过命令下载ftp文件 read -s -p "Your passwd: " Passwd; wget --user=YourUserName --p ...

  9. Thread 常搞混的几个概念sleep、wait、yield、interrupt

    sleep:在指定的毫秒数内让当前正在执行的线程休眠(暂停执行),此操作受到系统计时器和调度程序精度和准确性的影响.该线程不丢失任何监视器的所属权. 通过调用sleep使任务进入休眠状态,在这种情况下 ...

  10. find - exec 命令

    find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了. exec解释: -exec  参数后面跟的是command ...