`
拖拖鞋
  • 浏览: 92232 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

级联下拉列表的实现

阅读更多
原创!转载请注明地址 http://ycde2009.iteye.com/blog/1990738
    在前端的组件上绑定事件,在该事件中使用ajax来异步请求,将返回结果组装成前台html代码。
//修改页面时下拉框的连动
//品牌修改时 连动车型

$("#brandID").change(changeBrand_Update);
function changeBrand_Update(){
	var value =$("#brandID").val();
	$("#vehicleModelID").html("");
	if(!value || "0"==value)
	{
		return;
	}
	$.ajax({
		  url: "${pageContext.request.contextPath}/brandJson?brandID="+value,
		  dataType: "json",
		  success:function(formData){
			  var html = "";
			  $.each(formData.entity,function(i,n){
				  if(n.entityID == $("#vehicleModelID_hidden").val())
				  {
					  html = html + "<option selected value="+n.entityID+">"+n.name+"</option>"
				  }
				  else
				  {
					  html = html + "<option value="+n.entityID+">"+n.name+"</option>"
				  }
			  });
			  $("#vehicleModelID").html(html);
		  }
	});
};

				  else
				  {
					  html = html + "<option value="+n.entityID+">"+n.name+"</option>"
				  }
			  });
			  $("#vehicleModelID").html(html);
		  }
	});
};
分享到:
评论

相关推荐

    安卓--级联下拉列表实现DEMO

    这个"安卓--级联下拉列表实现DEMO"是一个实例,它展示了如何在Android应用中创建并使用这种交互效果。下面将详细介绍这个DEMO中的关键知识点。 首先,我们来看看级联下拉列表的基本概念。级联意味着一个下拉列表的...

    jquery简单实现级联下拉列表

    在给定的代码片段中,我们看到一个简单的级联下拉列表实现。页面中有两个下拉列表,`#s1` 和 `#s2`。`#s1` 的改变会触发 `change()` 函数,该函数根据 `#s1` 的选中值动态修改 `#s2` 的内容。 #### 代码解析 1. **...

    级联下拉列表

    这是一个基础的级联下拉列表实现,对于更复杂的需求,例如异步加载数据、多级级联等,可能需要引入更高级的库,如jQuery UI的`selectmenu`插件或现代前端框架(如React、Vue、Angular)中的组件库。不过,这个简单的...

    input 级联下拉列表

    以下是对`input`级联下拉列表的详细解释和实现方法。 1. **HTML基础知识**: `input`元素是HTML中的一种表单控件,用于接收用户输入。在创建级联下拉列表时,我们通常使用`&lt;select&gt;`标签来定义下拉列表,并通过`...

    级联下拉列表工具类,js实现

    ### 级联下拉列表工具类:JS实现详解 #### 概述 级联下拉列表是一种在前端开发中常见的交互方式,特别是在处理多层级数据时,它能有效地帮助用户进行选择。本文将深入分析一个名为`ComboSelectFactory`的...

    jQuery实现的多级级联下拉列表

    **jQuery实现的多级级联下拉列表** 在网页开发中,级联下拉列表是一种常见的交互元素,它允许用户从一系列相关选项中选择,这些选项根据先前的选择动态更新。在本项目中,我们利用jQuery库来实现这种功能,同时结合...

    网页表单级联下拉列表自动填写方法

    网页表单级联下拉列表自动填写方法是指在网页表单中,多个下拉列表框之间存在关联关系,选择前一个下拉列表框的选项后,后一个下拉列表框才会出现相关的选项,这样可以实现自动填写省、市、县三级下拉列表框的功能。...

    Ajax级联下拉列表.rar

    在本示例中,"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据...

    select级联下拉列表

    以下是一个简单的jQuery示例,展示了如何实现级联下拉列表: ```javascript $(document).ready(function() { $('#province').on('change', function() { var selectedProvince = $(this).val(); // 使用Ajax获取...

    ajax实现级联下拉列表代码

    在提供的"ajax实现的级联下拉列表代码.txt"文件中,应该包含了实现上述过程的具体JavaScript代码。这个文件可能包含了一个或多个函数,用于初始化下拉列表、绑定事件监听器、构建AJAX请求、解析响应数据以及更新DOM...

    JavaScript动态级联下拉列表框

    在实现JavaScript动态级联下拉列表框时,通常涉及以下几个关键知识点: 1. DOM操作:JavaScript通过Document Object Model(DOM)来操作HTML元素。要实现级联效果,我们需要获取或创建下拉列表(`&lt;select&gt;`元素),...

    jQuery 级联下拉列表(修正版)

    本知识点主要聚焦于使用jQuery实现的级联下拉列表,特别是修正版的实现方式。 首先,我们来看标题"jQuery 级联下拉列表(修正版)"。这意味着我们将讨论一个已经过优化或修复了某些问题的jQuery插件,用于创建级联...

    jQuery 级联下拉列表

    在网页开发中,级联下拉列表是一种常见的交互设计,常用于实现省市区选择、类别筛选等场景。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和Ajax交互,同时也提供了丰富的插件来扩展功能。在这个...

    javascript实现无限级级联下拉列表

    在JavaScript编程中,实现无限级联下拉列表是一项常见的需求,尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择,每一级的选择会影响到下一级的显示内容。下面我们将...

    Html dom中的select, option_ 级联下拉列表

    在级联下拉列表中,通常通过改变option元素来实现动态更新。在HTML DOM中操作select和option时,可以使用诸如document.getElementById获取select元素,再利用add方法来添加option元素。 此外,创建元素时还需注意...

    JavaScript解析XML实现多级级联下拉列表

    总结来说,实现JavaScript解析XML实现多级级联下拉列表的关键在于理解XML的结构、使用DOMParser解析XML,以及处理级联下拉列表的事件和逻辑。通过这些技术,我们可以创建出高效且易于维护的级联选择功能,提升用户的...

    jsp出生日期三级级联下拉列表

    在本文中,我们将深入探讨如何在JSP(JavaServer Pages)中实现一个基于JavaScript的出生日期三级级联下拉列表。这种功能常用于用户注册、个人信息填写等场景,让用户能够方便地选择他们的出生年、月和日。 首先,...

    AJAX_Servlet级联下拉列表

    在Web开发中,AJAX(Asynchronous JavaScript and XML)与Servlet技术常常被用来实现动态、交互式的用户界面,其中一种常见的应用就是级联下拉列表。级联下拉列表允许用户在选择一个选项后,根据所选选项动态加载并...

    AJAX重构+级联下拉列表

    本项目聚焦于使用AJAX进行页面重构,特别是实现级联下拉列表,这是一种常见的用户界面元素,常见于地址选择、类别筛选等场景。 在级联下拉列表中,一个下拉框的选择会影响另一个下拉框的选项。例如,当你在第一个...

Global site tag (gtag.js) - Google Analytics