通过隐藏option实现select的联动效果


Posted in Javascript onNovember 10, 2009
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Page</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript" language="javascript"> 
$(function(){ 
//Bind the change event 
$("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange); 
$("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange); 
}); //The change event of language dropdown-list 
var eDropLangChange = function(){ 
//The selected value of the language dropdown-list. 
var selectedValue = $(this).val(); 
//show all options. 
$("#dropFrame").children("span").each(function(){ 
$(this).children().clone().replaceAll($(this)); //use the content of the <span> replace the <span> 
}); 
//Filter the data through selected value of language dropdown-list except <Please Select>. 
//If the option is <Please Select>, it only needs to show all and hide nothing. 
if(parseInt(selectedValue) != 0){ 
//hide the option whose parentid is not equal with selected value of language dropdown-list. 
//The <Please Select> option should not be hidden. 
$("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){ 
$(this).wrap("<span style='display:none'></span>"); //add a <span> around the <option> and hide the <span>. 
}); 
} 
}; 
//The change event of frame dropdown-list. 
var eDropFrameChange = function(){ 
//Find the selected option of frame dropdown-list. set the value of language dropdown-list by selected parentid. 
$("#dropLang").val($(this).children("option:selected").attr("parentid")); 
}; 
</script> 
</head> 
<body> 
<div> 
<select id="dropLang"> 
<option selected="selected" value="0"><Please Select></option> 
<option value="1">Javascript</option> 
<option value="2">Java</option> 
<option value="3">C#</option> 
</select> 
<select id="dropFrame"> 
<option selected="selected" value="0"><Please Select></option> 
<option value="1" parentid="1">JQuery</option> 
<option value="2" parentid="1">Prototype</option> 
<option value="3" parentid="2">Struts</option> 
<option value="4" parentid="2">Spring</option> 
<option value="5" parentid="2">Velocity</option> 
<option value="6" parentid="2">Hibernate</option> 
<option value="7" parentid="3">ASP.NET MVC</option> 
<option value="8" parentid="3">Castle</option> 
</select> 
</div> 
</body> 
</html>

这样,通过上一个下拉框的选择过滤下拉框的内容,基本实现了隐藏<option>的效果,当然,也可以把这种方法利用在下拉框级联选择的功能上,无需Ajax。

该代码在IE6,IE7,Chrome2,Firefox3。5下验证通过。

Javascript 相关文章推荐
JS Timing
Apr 21 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
js 概率计算(简单版)
Sep 12 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 #Javascript
asp.net HttpHandler实现图片防盗链
Nov 09 #Javascript
为javascript添加String.Format方法
Aug 11 #Javascript
prototype 中文参数乱码解决方案
Nov 09 #Javascript
jQuery 常见学习网站与参考书
Nov 09 #Javascript
Javascript select下拉框操作常用方法
Nov 09 #Javascript
页面中js执行顺序
Nov 09 #Javascript
You might like
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python打开网页和暂停实例
2014/09/30 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python3调用windows dos命令的例子
2019/08/14 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
大学生党员自我批评
2014/02/14 职场文书
教师产假请假条
2014/04/10 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
nginx.conf配置文件结构小结
2022/04/08 Servers