使用Jquery，实现Select的二级联动：
<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(){
$("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange);
$("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange);
});
var eDropLangChange = function(){
var selectedValue = $(this).val();
$("#dropFrame").children("span").each(function(){
$(this).children().clone().replaceAll($(this));
});
if(parseInt(selectedValue) != 0){
$("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){
$(this).wrap("<span style='display:none'></span>");
});
}
};
var eDropFrameChange = function(){
$("#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>
分享到：
相关推荐
本话题主要关注的是使用jQuery实现的二级联动下拉菜单，这是一种常见的交互设计，常用于网站的筛选或导航功能。下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先，联动菜单的基本概念是...
在二级联动菜单的场景中，jQuery可以帮助我们更高效地处理用户与<select>元素的交互，如改变第一级菜单时，无需整个页面刷新，仅更新第二级菜单的内容。 接下来，AJAX（Asynchronous JavaScript and XML）是构建...
本文将深入探讨“jQuery 二级联动”这一主题，它通常指的是在网页中实现下拉菜单或者选择框之间的联动效果，例如在地区选择时，选择省份后自动更新城市的下拉列表。 首先，我们要理解jQuery的基础知识。jQuery库的...
本教程将聚焦于一个特定的应用场景——利用jQuery制作简单二级联动效果。这种效果通常应用于下拉菜单或者选择框，当用户在一个选择框中选择一个选项时，另一个选择框会根据用户的选择动态更新其内容。 在...
在本示例中，我们将探讨如何使用jQuery实现“select”元素的互斥联动效果，这是一种常见的表单控件交互设计，常用于多级筛选或配置场景。 一、基本概念 1. jQuery：jQuery 是一个高效、简洁而易用的JavaScript库，...
下面我们将深入探讨如何利用jQuery实现二级联动下拉列表。 首先，我们需要了解什么是二级联动下拉列表。它是由两个或多个下拉列表组成，当用户在一个下拉列表中选择一个选项时，另一个下拉列表的内容会根据前者的选...
在本教程中，我们将深入探讨如何使用jQuery库来实现一种常见的网页交互功能——省市二级联动效果。这种效果常用于地址选择，用户在选择省份时，下拉框中的城市选项会根据所选省份动态更新。这既提高了用户体验，也...
本文将深入探讨无刷新二级联动的原理、实现方式以及其在jQuery中的应用。 首先，我们要理解“无刷新”意味着页面内容的更新不依赖于整个页面的重新加载，而是通过Ajax（异步JavaScript和XML）技术来实现局部数据的...
标题“jquery省市二级联动多选”指的是使用jQuery库实现一个功能，即在网页上创建一个交互式的下拉列表，展示省市两级数据，并且支持多选。这种功能常见于需要用户选择来自不同地区的多个选项的场景，例如地址填写、...
### 使用jQuery实现二级联动 #### 一、简介 在网页设计与开发中，经常会遇到需要根据用户选择的一个选项动态更新另一个选项的情况，这种交互被称为“级联选择”或“联动选择”。例如，在填写地址信息时，当用户...
在城市二级联动的场景中，jQuery的便利性体现在可以轻松地绑定事件、获取和设置DOM元素的属性，以及动态地更新页面内容。 实现城市二级联动的基本步骤如下： 1. **数据准备**：首先，你需要有一份包含所有城市和...
两级联动选择插件调用： $('.select-value').mPicker({ //级别 level:2, //需要渲染的json，二级联动的需要嵌套子元素，有一定的json格式... jQuery手机端省市二级联动选择代码是一款非常实用的城市选择器插件。
在jQuery中实现二级联动的基本步骤如下： 1. 获取两个下拉菜单的元素，例如：`var select1 = $('#select1'); var select2 = $('#select2');` 2. 创建一个数据结构，如JSON对象，存储各级别选项之间的关联关系。 3. ...
《jQuery省市二级联动关联店面查询表单代码》 在网页开发中，经常需要实现一种功能：当用户选择一个省份时，下方的城市下拉菜单会自动更新为与该省份相关的城市选项，这种效果被称为二级联动。这个名为"jQuery省市...
通常，三级联动是通过HTML的`<select>`元素和JavaScript（或jQuery）配合实现的。在HTML中，我们创建三个`<select>`标签，分别对应省、市、区，每个`<select>`都有一个`onChange`事件监听器。当用户在一级选择（省）...
本文将深入探讨如何使用jQuery的getJSON方法来实现一个基于数据库的二级联动功能，同时结合后台的JSP（JavaServer Pages）技术。 首先，让我们了解什么是二级联动。在网页设计中，二级联动通常指的是在一个下拉菜单...
jQuery下拉框三级联动插件的核心功能在于实现三个下拉框之间的联动效果，当用户在一级下拉框中选择一项时，二级下拉框会根据一级的选择动态加载相关数据；同样，二级选择会影响三级下拉框的内容。这种联动机制使得...
在这个项目中，描述提到"里面详细写了一个实际的省市县的三级联动"，这意味着代码将根据用户在第一级（省）的选择，动态加载第二级（市）的选项，再根据市的选择更新第三级（县/区）的选项。这是一种常见的数据筛选...
### jQuery中的二级联动知识点解析 #### 一、概念与应用场景 **二级联动**是指在一个页面中，当用户选择了第一个下拉列表（或选择器）的一个选项时，第二个下拉列表的内容会根据第一个选择器的选择结果进行动态...
实现省市区三级联动，就是当用户在第一级（省份）选择时，第二级（城市）的选项会相应更新，同样，当城市被选中时，第三级（区县）的选项也会动态改变。这需要利用JavaScript的事件监听和DOM操作来完成，通过对省份...