文档章节

Select 级联操作[原生JavaScript+Jquery]

残风vs逝梦
 残风vs逝梦
发布于 2014/06/20 12:11
字数 246
阅读 879
收藏 7
点赞 0
评论 0

Select 级联操作:

原生Javascript 的select 级联操作:

    HTML:

<select name="biboId" id="biboId" onchange="getSmbo(this);" style="margin-left:10px;">
	<option value="-1">--请选择大版块--</option>
        <option value="0">--java--</option>
	<option value="1">--数据库--</option>
	<option value="2">--技术前沿--</option>
</select>
<select id="smboId" name="smboId">
	<option value="-1">--请选择小版块--</option>
</select>


原生的JavaScript:

    function getSmbo(SelObj){
    		var val=SelObj.value;
    		if(val!=-1){
    			var smboObj=document.getElementById("smboId");
    			/*上来清空小版块的选项*/
    			for(var i=smboObj.options.length;i>=0;i--){
    				smboObj.remove(i);
    			}
    			/*添加一个待选项*/
    			smboObj.options.add(new Option("--请选择小版块--","-1"));
    			if(val==0){
    				smboObj.options.add(new Option("--java基础--","0"));
    				smboObj.options.add(new Option("--java面向对象--","1"));
					smboObj.options.add(new Option("--java核心API--","2"));
					smboObj.options.add(new Option("--javaEE--","3"));
    			}else if(val==1){
    					smboObj.options.add(new Option("--SQL基础--","0"));
					smboObj.options.add(new Option("--Oracle--","1"));
					smboObj.options.add(new Option("--MySQL--","2"));
    			}
    		}
    }

  注意,这儿有个简单的方法,清除select中得选项:

selObj.options.length=0; //可以替代以上的
/*上来清空小版块的选项*/
    			for(var i=smboObj.options.length;i>=0;i--){
    				smboObj.remove(i);
    			}


jquery的select 级联操作:


© 著作权归作者所有

共有 人打赏支持
残风vs逝梦
粉丝 49
博文 116
码字总数 71921
作品 0
武汉
高级程序员
分享26本关于Jquery的学习书籍(免费下载)

分享26本关于Jquery的学习书籍(免费下载) 1、精通JavaScript+jQuery 2、网友small6分享锋利的jQuery实例源码 3、网友small6分享jQuery权威指南配套源代码 4、犀利开发jQuery内核详解与实践...

邓剑彬 ⋅ 2012/11/30 ⋅ 8

个人项目中前端(js+jquery)遇到的问题汇总

个人项目中前端(JavaScript+Jquery)遇到的问题汇总 前言 在使用js和jquery的时候主要导入对应的js文件。 01.JavaScript 01.1.doument.form_name.相关 1>.doument.formname.ok.value:获取表...

meiqi0538 ⋅ 04/19 ⋅ 0

JPA注解记录

------------------------------------------------------------------- @NotFound(action=NotFoundAction.IGNORE) 使...

heroShane ⋅ 2014/02/10 ⋅ 1

ThinkPHP + Ajax 实现2级联动下拉菜单

首先是数据库的设计。分类表叫cate. 我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id。...

Jceee ⋅ 2014/04/07 ⋅ 7

Hibernate利用关联关系操纵对象

Hibernate利用关联关系操纵对象 数据对象之间关联关系有一对一、一对多及多对多关联关系。在数据库操作中,数据对象之间的关联关系使用JDBC处理很困难。本节讲解如何在Hibernate中处理这些对...

微笑的江豚 ⋅ 2014/10/07 ⋅ 0

SeQuaLite的网友评论

SeQuaLite是一个轻量级,java数据存取框架(整个jar包不到80k)。支持CRUD操作。支持对象懒加载,通过创建代理对象或空对象来代替,等有需要时再加载。支持级联保存与级联删除操作。SeQuaLi...

红薯 ⋅ 2009/12/11 ⋅ 2

数据持久层框架--SeQuaLite

SeQuaLite是一个轻量级,java数据存取框架(整个jar包不到80k)。支持CRUD操作。支持对象懒加载,通过创建代理对象或空对象来代替,等有需要时再加载。支持级联保存与级联删除操作。SeQuaLi...

匿名 ⋅ 2008/09/07 ⋅ 4

实现级联查询

关于数据库设计中的分级分层问题的总结(适用于组织结构图及家谱等问题) 大家在很多地方都会遇到诸如此类的问题,如: 在一个组织中,从高层领导到中层领导到普通职工,有着一种分级的关系,...

ghostwl ⋅ 2015/03/17 ⋅ 0

MVVM架构~knockoutjs系列之级联select

对于下拉列表框的绑定在之前的knockoutjs文章中已经介绍过,今天主要说一下级联的select,事实上,在knockoutjs里,是以数据绑定为中心的,而数据是以面向对象为前提的,而对于级联绑定来说,...

mcy247 ⋅ 2017/12/06 ⋅ 0

浅谈hibernate(cascade,lazy,inverse,fetch)

1.cascade是否执行级联操作 在保存主表的时候,如果没有保存从表信息,会抛出异常,如果设置了级联关系,可以自动先保存从表,在保存主表 all: 所有情况下均进行关联操作,即save-update和d...

长平狐 ⋅ 2013/01/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 41分钟前 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部