手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >通过隐藏option实现select的联动效果
通过隐藏option实现select的联动效果
摘要:复制代码代码如下:UntitledPage$(function(){//Bindthechangeevent$("#dropLang").u...

复制代码 代码如下:

<!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></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下验证通过。

【通过隐藏option实现select的联动效果】相关文章:

JavaScript实现广告的关闭与显示效果实例

讲解JavaScript中for...in语句的使用方法

显示、隐藏密码

javascript实现table表格隔行变色的方法

jQuery实现在列表的首行添加数据

jQuery插件pagewalkthrough实现引导页效果

JavaScript实现列表分页功能特效

jQuery实现的多屏图像图层切换效果实例

COOL而实用的动态效果

JavaScript实现自动变换表格边框颜色

精品推荐
分类导航