文档章节

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

残风vs逝梦
 残风vs逝梦
发布于 2014/06/20 12:11
字数 246
阅读 893
收藏 7

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逝梦
粉丝 53
博文 118
码字总数 71921
作品 0
武汉
高级程序员
分享26本关于Jquery的学习书籍(免费下载)

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

邓剑彬
2012/11/30
3.2K
8
个人项目中前端(js+jquery)遇到的问题汇总

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

meiqi0538
04/19
0
0
oracle 对象管理 01_用户及权限

一、用户管理 1.创建用户(可带用户的profile文件,对用户的约束信息) CREATE USER username IDENTIFIED BY password DEFAULT TABLESPACE tablespace1 TEMPORARY TABLESPACE tablespace2; 2......

PeakFang-BOK
10/13
0
0
ThinkPHP + Ajax 实现2级联动下拉菜单

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

Jceee
2014/04/07
0
7
Python全栈 MySQL 数据库 (SQL查询、备份、恢复、授权)

ParisGabriel 每天坚持手写 一天一篇 决定坚持几年 为了梦想为了信仰   开局一张图 今天接着昨天的说 索引有4种: 普通 索引 :index 唯一索引:unique 主键索引:primary key 外键索引:f...

巴黎香榭
08/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rabbitmq学习(一)

RabbitMQ是目前非常热门的一款消息中间件,具有高可靠、易拓展、高可用及丰富的功能 1.什么是消息中间件 消息是指在应用间传送的数据。包含文本字符串、JSON、内嵌对象 消息队列中间件(消息...

hensemlee
24分钟前
1
0
学习设计模式——原型模式

1. 认识原型模式 1. 定义:用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象。 2. 结构: Prototype:声明一个克隆自身的接口,用来约束想要克隆自己的具体实现类,要求这些类...

江左煤郎
30分钟前
1
0
观察者模式

观察者模式的套路 有如下角色: 事件,比如修改,用户点击; 事件队列,触发事件之后,会把事件一个一个放入事件队列 监听器,采用某种方式(一般是轮询,或者io阻塞机制),来判断事件队列是否有新的未...

黄威
33分钟前
1
0
线程安全策略

四个线程安全策略 线程限制: 一个被线程限制的对象,由线程独占,并且只能被占有它的线程修改 共享只读: 一个共享只读的对象,在没有额外同步的情况下,可以被多个线程并发访问,但是任何线...

Ala6
40分钟前
2
0
Dubbo (三)源码分析 —— 架构原理

1 核心功能 首先要了解Dubbo提供的三大核心功能: Remoting:远程通讯 提供对多种NIO框架抽象封装,包括“同步转异步”和“请求-响应”模式的信息交换方式。 Cluster: 服务框架 提供基于接口方...

小刀爱编程
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部