通过隐藏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 相关文章推荐
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
js tab效果的实现代码
2009/12/26 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
js微信支付实现代码
2016/12/22 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
深入理解Python中字典的键的使用
2015/08/19 Python
pycharm安装图文教程
2017/05/02 Python
Python中super函数的用法
2017/11/17 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
护士实习鉴定范文
2013/12/22 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL