繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 通过隐藏option实现select的联动效果
- Javascript
- 在Z-Blog中运行代码[html][/html]（纯JS版）
- 统一接口：为FireFox添加IE的方法和属性的js代码
- 网页自动刷新，不产生嗒嗒声的一个解决方法
- 驱动事件的addEvent.js代码
- [原创]提供复制本站内容时出现,该文章转自IT学习网等字样的js代码
- CSDN轮换广告图片轮换效果
- 一段多浏览器的"复制到剪贴板"javascript代码
- Javascript中的常见排序算法
- JS Common 2 之比较常用到的函数
- 非正则实现的只能输入汉字的输入框
- CSDN上快速结贴的方法，JS实现
- js eval木马代码,以后再分析吧
- 屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
- 一个不错的可以检测多中浏览器的函数和其它功能
- 状态栏显示欢迎信息的脚本特效
- 关于文本限制字数的js代码
- 在你的网页中嵌入外部网页的方法
- 在IE中调用javascript打开Excel的代码(downmoon原作)
- javascript实现动态增加删除表格行(兼容IE/FF)
- javascript中获取选中对象的类型
Javascript 中的 通过隐藏option实现select的联动效果
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 483 ::
收藏到网摘: n/a
开始的时候需求是根据一定条件隐藏一部分<option>标签，类似联动效果，但是目前的html规范并没有为<option>提供隐藏的效果，因此常用的设置display或者visibility无效。
复制代码 代码如下:
<!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下验证通过。
评论 (0) All
