文档章节

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

残风vs逝梦
 残风vs逝梦
发布于 2014/06/20 12:11
字数 246
阅读 887
收藏 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逝梦
粉丝 50
博文 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
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
Spring-data-jpa 让数据访问更简单、更优雅

Hibernate的基于Entity对象模型的数据ORM映射管理 门槛较高,深度应用比较复杂; 移植性好,兼容不同的数据库的操作; 数据访问层操作简单,基于HQL操作更加面向对象; 级联操作比较方便 My...

后海
2017/12/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell-日志脚本小实验

1.查找日志2018-8-15,求得那一分钟访问量最大。 #/bin/bash#from cc#2018-8-15#2018-08-15.log 哪一分钟 访问量 最大for d in `ls /data/nginx/logs/`doif [ -a 2018-08-15...

chencheng-linux
昨天
0
0
Android中的设计模式之状态模式

参考 《设计模式:可复用面向对象软件的基础 》5.8 State 状态 对象行为型模式 《Android源码设计模式解析与实战》第7章 随遇而安--状态模式 意图 允许一个对象在其内部状态改变时改变它的行...

newtrek
昨天
0
0
xshell端 vim没有颜色

说明 使用xshell连接服务器的时候,使用vim打开文档没有颜色 解决方法: 1.在更目录home或者etc下找到vim的配置文件vimrc 2.vim打开它找个坑,添加下面这个东西 set t_Co=256 3.保存退出,就...

杉下
昨天
0
0
spring 资料

spring boot http://www.ityouknow.com/springboot/2016/01/06/spring-boot-quick-start.html

zaolonglei
昨天
2
0
TypeScript基础入门 - 函数 - 简介

转载 TypeScript基础入门 - 函数 - 简介 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.1.6 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接...

durban
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部