`
zy116494718
  • 浏览: 477758 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery实现二级联动

 
阅读更多
<select name="companyType_1">
<option value="00" selected="selected">请选择</option>
<option value="01">政府/公共管理/社会保障</option>
<option value="02">金融/投资</option>
</select>				
<select name="companyType_2">
<option value="0000" selected="selected">请选择</option>
<option value="0101">党政机构</option>
<option value="0102">公共事业/市政建设</option>
<option value="0103">社会保障</option>
<option value="0104">社会团体/非盈利组织</option>
<option value="0132">sdafasf</option>
<option value="0201">银行</option>
<option value="0202">保险</option>
<option value="0203">证券/期货</option>
<option value="0204">金融/投资</option>
<option value="0205">财会</option>
<option value="0206">审计</option>
</select>

    实现选01的筛选出0101-0105,选02的筛选出02-06

     代码为:

    

$(function(){

	// //这里必须用克隆,否则remove时会把$child的子节点都删除	
	var $child = $("[name=companyType_2]").clone();
	
	$("[name=companyType_2] option:gt(0)").remove();	

 	$("[name=companyType_1]").change(function(){
	
		var parentVal = $(this).val();
	    
		//先删除,再添加
		$("[name=companyType_2] option:gt(0)").remove();	
		
	    if(parentVal!='00'){
	       //是把符合条件的克隆出来然后添加到selected节点中,这样不会改变$child本身的内容
		   $child.find("option[value^="+parentVal+"]").clone().appendTo($("[name=companyType_2]"));
 	    }
			
	})  
	
	
})

  

    ps:不能对option用hide()方法,因为IE不支持

0
0
分享到:
评论

相关推荐

    原生AJAX或jQuery实现二级联动选择以及解析XML和JSON数据格式

    本篇博客主要探讨如何利用这两者实现二级联动选择,即当用户在一级选择中作出选择时,二级选择会自动更新,以及如何解析XML和JSON数据格式。下面我们将详细探讨这些知识点。 首先,原生AJAX是通过JavaScript直接与...

    jquery 省市二级联动

    一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单,看过即会使用 主要字段内容在city.data.js中,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可

    基于jquery实现二级联动效果

    在网页开发中,二级联动效果通常用于实现如地区选择、分类筛选等功能,使得用户能够根据一级选项选择相应的二级选项。本实例将详细讲解如何利用jQuery库来实现这种效果。 首先,我们来看一下给出的HTML代码片段。在...

    jQuery省市二级联动关联店面查询表单代码

    在这个“jQuery省市二级联动关联店面查询表单代码”项目中,开发者利用jQuery实现了用户友好的店面查询功能,特别适用于网络营销场景,帮助用户快速找到连锁店铺的全国网点。 首先,我们要理解“省市二级联动”的...

    jquery二级联动下拉列表

    下面我们将深入探讨如何利用jQuery实现二级联动下拉列表。 首先,我们需要了解什么是二级联动下拉列表。它是由两个或多个下拉列表组成,当用户在一个下拉列表中选择一个选项时,另一个下拉列表的内容会根据前者的选...

    jQuery移动端省市二级联动选择插件.zip

    "jQuery移动端省市二级联动选择插件"是专为解决这个问题而设计的一个工具,它利用JavaScript和jQuery库,提供了高效、易用的解决方案。这个插件允许用户在手机或平板设备上方便地选择省份和城市,极大地提升了用户...

    ajax+jquery二级联动实现

    在本文中,我们将深入探讨如何使用AJAX和jQuery来实现二级联动效果,特别是在网页表单中,例如选择籍贯的省份和城市。二级联动是指在一个下拉列表的选择触发后,另一个下拉列表自动填充相关数据。在这个例子中,当...

    jquery 二级联动

    本文将深入探讨“jQuery 二级联动”这一主题,它通常指的是在网页中实现下拉菜单或者选择框之间的联动效果,例如在地区选择时,选择省份后自动更新城市的下拉列表。 首先,我们要理解jQuery的基础知识。jQuery库的...

    jquery select二级联动菜单

    本话题主要关注的是使用jQuery实现的二级联动下拉菜单,这是一种常见的交互设计,常用于网站的筛选或导航功能。下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先,联动菜单的基本概念是...

    Jquery实现的的动态无刷新的二级联动菜单

    在本示例中,我们探讨的是如何利用jQuery实现一个无刷新的二级联动菜单,这涉及到jQuery库、AJAX异步请求以及JSON数据解析等多个关键知识点。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理...

    二级联动下拉菜单实例

    以下是一个简单的jQuery实现二级联动下拉菜单的示例: ```html 请选择 &lt;!-- 一级菜单选项 --&gt; 请选择 &lt;!-- 二级菜单选项 --&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; $...

    jquery二级联动菜单

    java结合jquery进行异步提交在jsp页面中实现二级联动菜单,该源码在struts+mvc基础上实现的,简单明了。其中的数据库可自行更改,只要相应的更改连库字符串等即可。也可多加几个下拉框将项目扩展为多级联动菜单

    利用JQuery制作简单二级联动

    本篇文章将详细讲解如何利用jQuery实现一个简单的二级联动效果,这个效果常见于下拉菜单或者地区选择器中,当用户在一级菜单中选择一个选项时,二级菜单会相应地展示与之相关的子选项。 首先,我们需要了解联动的...

    jquery解析xml并实现二级联动

    本主题将深入探讨如何使用jQuery解析XML数据,并利用这些数据实现省市二级联动的效果。这种功能常见于地理选择,用户在选择省份后,下拉菜单会自动更新展示对应省份的城市选项。 首先,我们需要理解XML(Extensible...

    jquery实现的水平三级联动

    在IT领域,尤其是在网页开发中,"jQuery实现的水平三级联动"是一种常见的交互设计,用于增强用户界面的交互性和信息的层次展示。本知识点主要涉及jQuery库的使用、HTML结构设计、CSS样式调整以及JavaScript事件处理...

    二级联动下拉框

    在网页设计和开发中,"二级联动下拉框"是一种常见的交互元素,它通常用于实现多级选择或者关联数据的筛选。例如,在选择省份时,第一个下拉框会选择省份,当选择一个省份后,第二个下拉框会动态加载并显示该省份的...

    jquery城市二级联动

    "jQuery城市二级联动"就是利用JavaScript库jQuery实现这一功能的技术。 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。jQuery的语法设计使得开发者可以更加...

Global site tag (gtag.js) - Google Analytics