通过隐藏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 相关文章推荐
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
微信小程序之数据缓存的实例详解
Sep 29 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
python实现简易云音乐播放器
2018/01/04 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
如何编写python的daemon程序
2021/01/07 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
空中乘务员岗位职责
2014/03/08 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
汶川大地震感悟
2015/08/10 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
Java线程的6种状态与生命周期
2022/05/11 Java/Android