文档章节

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

残风vs逝梦
 残风vs逝梦
发布于 2014/06/20 12:11
字数 246
阅读 896
收藏 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.3K
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
Python全栈 MySQL 数据库 (SQL查询、备份、恢复、授权)

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

巴黎香榭
08/02
0
0
ThinkPHP + Ajax 实现2级联动下拉菜单

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

Jceee
2014/04/07
0
7

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu16.04下安装docker

[TOC] 本文开发环境为Ubuntu 16.04 LTS 64位系统,通过apt的docker官方源安装最新的Docker CE(Community Edition),即Docker社区版,是开发人员和小型团队的理想选择。 1. 开始安装 1.1 由于...

豫华商
33分钟前
3
0
使用XShell工具密钥认证登录Linux系统

如果你是一名Linux运维,那么Linux服务器的系统安全问题,可能是你要考虑的,而系统登录方式有两种,密码和密钥。哪一种更加安全呢? 无疑是后者! 这里我为大家分享用Xshell利器使用密钥的方...

dragon_tech
45分钟前
1
0
day178-2018-12-15-英语流利阅读-待学习

“真蛛奶茶”了解一下?蜘蛛也会产奶了 Lala 2018-12-15 1.今日导读 “蛋白质含量是牛奶的 4 倍,并有着更低的脂肪和含糖量”,听起来诱人又美味的并不是羊奶或豆奶,而是你可能打死都想不到...

飞鱼说编程
50分钟前
9
0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents

场景重现 npm install --verbose 安装依赖的时,出现如下警告 强迫症患者表示不能接受 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN......

taadis
54分钟前
2
0
OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
378
6

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部