开始的时候需求是根据一定条件隐藏一部分<option>标签,类似联动效果,但是目前的html规范并没有为<option>提供隐藏的效果,因此常用的设置display或者visibility无效。网上大部分解决方案是删除<option>节点或<option>置空。这显然不能够满足需求。后来经过试验,选择了利用标签包装的解决方案,基本原理如下:
当<option>需要隐藏的时候,在<option>标签外包装一个<span>标签,再令<span>标签为不可见。
当<option>需要显示的时候,恢复其正常的状态,即,去掉外面的<span>标签。
由于比较懒,所以利用JQuery框架来操作DOM对象和CSS,代码如下:
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>Untitled Page</title>
6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
7 <script type="text/javascript" language="javascript">
8 $(function(){
9 //Bind the change event
10 $("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange);
11 $("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange);
12 });
13
14 //The change event of language dropdown-list
15 var eDropLangChange = function(){
16 //The selected value of the language dropdown-list.
17 var selectedValue = $(this).val();
18
19 //show all options.
20 $("#dropFrame").children("span").each(function(){
21 $(this).children().clone().replaceAll($(this)); //use the content of the <span> replace the <span>
22 });
23
24 //Filter the data through selected value of language dropdown-list except <Please Select>.
25 //If the option is <Please Select>, it only needs to show all and hide nothing.
26 if(parseInt(selectedValue) != 0){
27 //hide the option whose parentid is not equal with selected value of language dropdown-list.
28 //The <Please Select> option should not be hidden.
29 $("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){
30 $(this).wrap("<span style='display:none'></span>"); //add a <span> around the <option> and hide the <span>.
31 });
32 }
33 };
34
35 //The change event of frame dropdown-list.
36 var eDropFrameChange = function(){
37 //Find the selected option of frame dropdown-list. set the value of language dropdown-list by selected parentid.
38 $("#dropLang").val($(this).children("option:selected").attr("parentid"));
39 };
40 </script>
41 </head>
42 <body>
43 <div>
44 <select id="dropLang">
45 <option selected="selected" value="0"><Please Select></option>
46 <option value="1">Javascript</option>
47 <option value="2">Java</option>
48 <option value="3">C#</option>
49 </select>
50 <select id="dropFrame">
51 <option selected="selected" value="0"><Please Select></option>
52 <option value="1" parentid="1">JQuery</option>
53 <option value="2" parentid="1">Prototype</option>
54 <option value="3" parentid="2">Struts</option>
55 <option value="4" parentid="2">Spring</option>
56 <option value="5" parentid="2">Velocity</option>
57 <option value="6" parentid="2">Hibernate</option>
58 <option value="7" parentid="3">ASP.NET MVC</option>
59 <option value="8" parentid="3">Castle</option>
60 </select>
61 </div>
62 </body>
63 </html>
这样,通过上一个下拉框的选择过滤下拉框的内容,基本实现了隐藏<option>的效果,当然,也可以把这种方法利用在下拉框级联选择的功能上,无需Ajax。
该代码在IE6,IE7,Chrome2,Firefox3。5下验证通过。
分享到:
相关推荐
在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于多级筛选或配置场景。 一、基本概念 1. jQuery:jQuery 是一个高效、简洁而易用的JavaScript库,...
本示例中,“jquery ajax xml 实现select联动”指的是利用jQuery的Ajax功能从XML文件中获取数据,动态更新HTML中的<select>元素,实现两个或多个下拉列表之间的联动效果。这种功能在多级分类选择、地区选择等场景中...
静态二级联动 js 调取数据 带有 option 值
本篇将深入探讨如何利用JSP和AJAX实现两级select联动的效果,以及这种效果在实际应用中的价值。 首先,我们要理解什么是JSP。JSP是Java的一种服务器端脚本语言,它允许开发者在HTML页面中嵌入Java代码,从而动态...
总结来说,实现"select联动"涉及前端和后端的配合。前端主要负责用户的交互逻辑和界面更新,后端负责数据的处理和响应。通过合理的编程和良好的设计,我们可以创建出高效且用户体验优秀的联动下拉框组件。
下面我们将详细讨论如何通过ASP和Select控件来实现这个联动效果。 首先,我们需要创建两个Select控件,分别代表省份和城市。HTML代码可能如下: ```html <select id="province" name="province" onchange=...
例如,在jQuery中,一个简单的多级联动实现可能如下: ```javascript $(document).ready(function() { // 1. HTML结构已设定 var provinces = [{id: '1', name: '北京', cities: [{id: '11', name: '北京1'}, {id...
- 事件监听:为了实现联动效果,我们需要监听用户在第一级`<select>`中的选择事件,如`change`事件。 - DOM操作:利用JavaScript的DOM(文档对象模型)接口,我们可以动态地修改和添加`<option>`元素,从而更新...
本教程将详细讲解如何利用`Select2`实现全国省市区的三级联动下拉菜单。 首先,我们需要理解`Select2`的核心功能。`Select2`可以将普通的HTML选择框转化为功能强大的输入控件,支持搜索、多选、远程数据加载等多种...
综上所述,通过引入select2.css和select2.js,结合适当的JavaScript代码,我们可以实现Select2插件的联动查询功能。在实际项目中,确保这两个文件被正确引用,并根据项目需求进行适当的配置和定制。
本文将深入探讨如何利用这些技术实现自定义的select联动效果。 首先,我们需要理解HTML的`<select>`元素。`<select>`元素用于创建一个下拉列表,而`<option>`元素则用于定义下拉列表中的选项。联动下拉菜单的基本...
下面我们将详细探讨如何使用jQuery实现城市三级联动效果。 首先,我们需要理解什么是联动效果。联动效果是指在一个下拉菜单(或其他选择器)的选择发生变化时,自动更新另一个或多个相关下拉菜单的内容。在城市三级...
通过以上步骤,我们可以实现一个完整的三级联动效果。在提供的压缩包文件"三级联动效果2"中,应该包含了实现这个功能的HTML、CSS和JavaScript代码。你可以打开这些文件,查看具体的实现方式,并根据自己的需求进行...
通过以上步骤,我们可以利用jQuery轻松实现二级联动下拉菜单的功能。对于更复杂的多级联动,可以递归地应用这个模式。这个插件的源码(未提供)可能会包含一些自定义的配置项、错误处理和额外的交互效果,以满足不同...
### JS简单实现多级Select联动菜单效果代码知识点解析 #### 一、多级Select联动菜单概念 多级Select联动菜单是一种常见的网页交互形式,用户在选择第一个下拉菜单中的选项后,第二个下拉菜单会根据第一个菜单的选择...
总的来说,通过JavaScript实现省市区select联动主要涉及DOM操作、事件监听以及数据结构的使用。`jsAddress.js`文件提供了便捷的工具,帮助开发者快速构建这种功能。在具体应用时,需要结合实际情况进行适当的调整和...
以上就是使用Ajax、JSON和`<select>`实现多级联动的基本流程。在实际项目中,可能还需要考虑错误处理、数据缓存、性能优化等问题。同时,随着前端技术的发展,现代框架如React、Vue等提供了更高效、更便捷的方式来...
6. **更新次级选择框**:将解析出的数据转化为HTML `<option>`元素,然后用jQuery的`html()`方法替换次级选择框的现有内容,从而实现联动效果。 7. **错误处理**:设置`error`回调函数,处理可能出现的网络或服务器...