通过隐藏option实现select的联动效果_表单特效

//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 replace the
});

//Filter the data through selected value of language dropdown-list except .
//If the option is , 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 option should not be hidden.
$("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){
$(this).wrap(""); //add a around the and hide the .
});
}
};

//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"));
};






Javascript
Java
C#



JQuery
Prototype
Struts
Spring
Velocity
Hibernate
ASP.NET MVC
Castle





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

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