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. php调用python

    test_python.php <?php $k = $_REQUEST['k']; if (!empty($k)) { $k = trim($k); //$a 用来捕获输出 // 这里的arr ...

  2. web-小知识点(随记)

    1.position:fixed:窗口定位的时候(在刷新页面时若未出现.得稍等一会的话,就直接把需要定位的内容写在<html>标签的首部.这样页面加载html的时候首先加载fixed定位的 ...

  3. CCKiller:Linux轻量级CC攻击防御工具,秒级检查、自动拉黑和释放 《CCKiller:Linux轻量级CC攻击防御工具,秒级检查、自动拉黑和释放》来自张戈博客

    张戈博客很久以前分享过一个CC攻击的防御脚本,写得不怎么样,不过被51CTO意外转载了.博客从此走上了经常被人拿来练手的不归之路. 当然,还是有不少朋友在生产环境使用,并且会留言询问相关问题.根据这些 ...

  4. MBA人物俞洪敏:亿万富翁的生活表

    我的智商非常一般,就是比别人勤奋.我的脑袋不属于特别笨的那种,但肯定也不是顶尖聪明的类型.在北大的50个同学当中,我的智商应该属于中下水平,这说明我不是顶尖高智商. 我的勤奋一般人跟不上.我平均每天工 ...

  5. Win7 设置、访问共享文件夹

    一.设置共享文件夹 右键点击文件夹,打开“属性”窗口,选择“共享”选项卡 点击“共享”按钮,打开“文件共享”窗口,在下拉列表中选择账户,点“添加”,最后点“共享”按钮. 二.访问 \\192.168. ...

  6. NHibernate 组件基础 (第六篇)

    NHibernate 组件基础 (第六篇) 一.组件简介 组件(Component)可以理解为被一个对象所包含的对象而持久化,而并非一个实体.简单说来,假如数据库有FirstName,LastName ...

  7. 蒙特卡洛方法计算圆周率的三种实现-MPI openmp pthread

    蒙特卡洛方法实现计算圆周率的方法比较简单,其思想是假设我们向一个正方形的标靶上随机投掷飞镖,靶心在正中央,标靶的长和宽都是2 英尺.同时假设有一个圆与标靶内切.圆的半径是1英尺,面积是π平方英尺.如果 ...

  8. e.target与e.currentTarget对比

    复制以下代码,即可查看效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...

  9. iOS流布局UICollectionView系列七——三维中的球型布局

      摘要: 类似标签云的球状布局,也类似与魔方的3D布局 iOS流布局UICollectionView系列七——三维中的球型布局 一.引言 通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑 ...

  10. C语言基础知识【函数】

    C 函数1.函数是一组一起执行一个任务的语句.每个 C 程序都至少有一个函数,即主函数 main() ,所有简单的程序都可以定义其他额外的函数.您可以把代码划分到不同的函数中.如何划分代码到不同的函数 ...