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. 【Datastage】Datastage在win10上安装报错:This Application requires one of the following versions of the .NET Framework:v1.1.4322 Do you want to install this .NET Framework version now?

    Datastage在win10上安装报错如下: 这个错误的意思是:.netFramWork的版本不符合要求,于是,我在网上下载了一个版本一致的 下载地址为:http://pan.baidu.com/s ...

  2. 中小企业 DevOps 从 0 到 1

    原文:http://www.sohu.com/a/145065274_262549 今天主要有四个课题: 先聊一聊 DevOps: 然后跟大家聊一聊运维知识的体系和职业发展: 再是中小企业基于开源的 ...

  3. 微软同步发行Windows 10和Windows 10 Mobile系统更新

    微软今天同步公布了新的 Windows 10 Redstone PC 和 Windows 10 Mobile 预览版. PC 版本是 Build 14271.Mobile 版本是 Build 1426 ...

  4. POJ1328 Radar Installation 【贪心&#183;区间选点】

    Radar Installation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 54593   Accepted: 12 ...

  5. 【JMeter4.0学习(四)】之JMeter对JMS性能测试脚本开发

    目录: 安装ActiveMQ并启动服务 JMeter对JMS点到点测试计划 JMeter JMS主题测试计划 附:相关学习地址 一.ActiveMQ官方下载地址:http://activemq.apa ...

  6. windows svchost.exe 引起的出现的莫名其妙的窗口失去焦点

    我不知道你们遇到没,反正我是遇到了,现在我就把解决方法给你们,当然都是从网上整理下来的 这个失去焦点可以分为两种,一种是病毒,一种是系统自带的问题 首先你得知道自己的窗口被什么给挤掉了焦点 先看看这篇 ...

  7. Warning: (3719, “‘utf8’ is currently an alias for the character set UTF8MB3, which will be replaced by UTF8MB4 in a future release. Please consider using UTF8MB4 in order to be unambiguous.”)

    [1]本地版本 Mysql 8.0.12 创建表SQL: DROP TABLE IF EXISTS students; CREATE TABLE `students` ( `sId` ) UNSIGN ...

  8. umbraco v7.6.4 surface controller not found 大深坑!

    注意在修改后台地址过程中对于web.config里的umbracoPath 如果你改成了~/admin,surface controller的路由就变成了 /admin/surface/{contro ...

  9. 阿里云服务器---centos编译安装ffmpeg

    环境 系统环境:CentOS release 6.7 (Final) 需求 编译安装ffmpeg 获取依赖 安装依赖包 yum install -y autoconf automake cmake f ...

  10. @media screen 针对不同移动设备——响应式设计

    概念: device-pixel-ratio:定义输入设备屏幕的可视宽度与可见高度比率. device-width:输入设备屏幕的可视宽度. orientation :屏幕横竖屏定向.landscap ...