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. POJ 3687:Labeling Balls(优先队列+拓扑排序)

    id=3687">Labeling Balls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10178 Acc ...

  2. 【BIEE】07_调整BIEE柱子的显示顺序

    现在有报表如下: 但是我们觉得这种显示不好看,想把非优秀员工的柱子放在前边显示,那么如何调整呢? 调整步骤: [编辑分析] 我们将此处条形图下的两个标签顺序重新调整一下 从上图可以看出,效果明显!

  3. rabbitmq 用户和授权

    官方文档 https://my.oschina.net/hncscwc/blog/262246?p=

  4. 通过特定获取获取电脑外网IP地址

    void get_WanIp() { }; ]; ]; ; }; GetTempPathA(MAX_PATH,szFilePath); strcat(szFilePath,"IPinTheW ...

  5. java中获取文件路径的几种方式

    http://xyzroundo.iteye.com/blog/1116159关于绝对路径和相对路径: 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:xyz es ...

  6. AVCaptureSession

    AVCaptureSession用来控制来自一个输入设备(AVCaptureDeviceInput)的声音和视频,流入一个输出缓冲区(AVCaptureOutput)的过程. 建立一个AVCaptur ...

  7. java调用本地默认浏览器

    1 http://blog.csdn.net/casularm/article/details/3401018 2

  8. 《JavaScript权威指南》学习笔记之二十---XMLHttpRequest和AJAX解决方式

    一.AJAX概述 AJAX是Asynchronous JavaScript and XML的缩写.中文译作异步JavaScript和XML.AJAX 不是新的编程语言,而是一种使用现有标准的新方法.在 ...

  9. ie8下面版本号(包含ie8)的浏览器不支持html5标签属性解决方式(Modernizr 2.6.2插件的使用)

    我这边申明下:我写这篇日志主要是想然ie8可以支持html5的个别标签闭合,并不能让ie全然支持html5.我之前写的可能会误导非常多同学.希望大家能明确. 今天脑抽想用html5标签设计一个网页.我 ...

  10. Httpclient 实现带参文件上传

    这里直接贴出的是我封装好的doPostFile方法,httpclient 的版本是3.1. public static String doPostFile(String url, Part[] par ...