`
raymond.chen
  • 浏览: 1437443 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

自定义标签:联动下拉框(二)

阅读更多

四、下拉框数据获取方法的源代码

public String findOptions() throws Exception{
	String entityName = getRequest().getParameter("_ENTITY");
	String keyField = getRequest().getParameter("_KEY");
	String descField = getRequest().getParameter("_DESC");
	String orderBy = getRequest().getParameter("_ORDER_BY");
	
	StringBuffer sb = new StringBuffer("");
	sb.append("from " + entityName);
	
	Map paramMap = RequestUtil.getParameterMap(getRequest(), "_CHAIN_PARAM_");
	if(paramMap.keySet().size() > 0){
		int paramCount = paramMap.keySet().size();
		int count = 0;
		for(Iterator it=paramMap.keySet().iterator();it.hasNext();){
			count++;
			if(count == 1){
				sb.append(" where ");
			}else{
				sb.append(" and ");
			}
			
			String key = (String)it.next();
			String value = String.valueOf(paramMap.get(key));
			
			if(CommonUtil.isEmpty(value) || value.equals("null")){
				sb.append(key.replaceFirst("_CHAIN_PARAM_", "") + " is null ");
			}else{
				sb.append(key.replaceFirst("_CHAIN_PARAM_", "") + "='" + value + "' ");
			}
		}
	}
	
	if(CommonUtil.isNotEmpty(orderBy)){
		sb.append(" order by " + orderBy);
	}
	System.out.println(sb.toString());
	
	List optionsList = getBaseService().find(sb.toString());
	getValueStack().set("optionsList", optionsList);
	getValueStack().set("keyField", keyField);
	getValueStack().set("descField", descField);
	
	return SUCCESS;
}

 

五、JS源代码

//下拉框联动选择事件
var chainSelectEvents = new Array();

function addInitChainSelectEvent(e){
	chainSelectEvents[chainSelectEvents.length] = e;
}

window.onload = function(){
	for(var i=0; i<chainSelectEvents.length; i++){
		eval(chainSelectEvents[i]);
	}
}

function chainSelect(selectName, paramStr){
	var objSelect = document.all[selectName];
	if(objSelect == null) return;
	
	var entityName = objSelect.entityName;
	var keyField = objSelect.keyField;
	var descField = objSelect.descField;
	var orderBy = objSelect.orderBy;
	var childSelectName = objSelect.childSelectName;
	var currentValue = objSelect.currentValue;
	var allowEmpty = objSelect.allowEmpty;

	//构造URL
	var url = "findOptions.action?_ENTITY=" + entityName + "&_KEY=" + keyField + "&_DESC=" + descField;
	if(orderBy != null && orderBy.length > 0) url += "&_ORDER_BY=" + orderBy;
	if(paramStr != null && paramStr.length > 0) url += "&" + paramStr;
	
	//Ajax
	jQuery.get(url, function(data){
		jQuery("select[name=" + selectName + "]").empty();
		
		var initIndex = 0;
		if(allowEmpty == "true"){
			initIndex = 1;
			jQuery("select[name=" + selectName + "]").append("<option value=''></option>");
		}
		
		var xmlObject = new ActiveXObject("MSXML.DOMDocument"); 
        		xmlObject.async = false;   
        		xmlObject.loadXML(data);
        
		//fill data into select
		var selectedIndex = 0;
		jQuery(xmlObject).find("option").each(function(i, n){
            			var key = jQuery(n).attr("key");
            			var desc = jQuery(n).attr("description");
            			objSelect.options[i+initIndex] = new Option(desc, key);
            			if(key == currentValue) selectedIndex = i+initIndex;
        		});
        		objSelect.options[selectedIndex].selected = true;
		
		//chain child select
		if(childSelectName != null && childSelectName.length > 0){
		bindChangeFunction(selectName, childSelectName);
		}
      	});
}

//绑定onChange事件
function bindChangeFunction(selectName, childSelectName){
	jQuery("select[name=" + selectName + "]").bind("change", function(){
		var parentKey = jQuery("select[name=" + selectName + "]:first").val();
		var params = jQuery("select[name=" + childSelectName + "]:first").attr("params");
		var pStr = params.replace("#PARENT_KEY#", parentKey);
		chainSelect(childSelectName, pStr);
	});
	jQuery("select[name=" + selectName + "]").trigger("change");
}

 

六、下拉框数据模板源代码

<?xml version="1.0" encoding="UTF-8"?>
<options>
<#list optionsList as item>
	<#assign key = "item.${keyField}">
	<#assign desc = "item.${descField}">
	<option key="${key?eval}" description="${desc?eval}"/>
</#list>
</options>

 

1
0
分享到:
评论

相关推荐

    js 自定义的联动下拉框

    联动下拉框是指在选择一个下拉框的某个选项后,另一个下拉框会自动...总之,通过编写JavaScript代码,可以创建出既美观又功能强大的自定义联动下拉框,它们不仅能够提升用户交互体验,还可以增强页面的可用性和美观度。

    js三级联动下拉框

    ### JS三级联动下拉框知识点解析 #### 一、知识点概览 在Web开发中,三级联动下拉框是一种常见的用户交互方式,主要用于提供多级数据选择的功能,比如省份、城市、区县的选择等场景。该功能通过JavaScript实现,...

    jQuery联动下拉框表单美化.zip

    "jQuery联动下拉框表单美化"就是一个专注于提升表单视觉效果和交互性的解决方案。这个项目是基于jQuery库以及一个名为Selector.js的插件来实现的,它能够帮助开发者轻松地创建动态、响应式的下拉菜单,从而增加表单...

    省市县三级联动下拉框

    标题 "省市县三级联动下拉框" 涉及到的是在Web开发中常见的一个功能需求,即在用户界面设计时实现省、市、县(区)三个层级的下拉菜单选择,通常用于地址填写或者区域筛选等场景。这种联动效果意味着当用户在一级...

    Jquery实现下拉框、多级联动

    在复杂的交互场景中,多级联动下拉框能够帮助用户更有效地导航和筛选信息。本教程将深入探讨如何使用jQuery来实现这样的功能,特别是在HTML结构、CSS样式以及JavaScript事件处理方面的应用。 首先,我们要理解HTML...

    Asp.net二级下拉框无刷新联动

    在Asp.net开发中,有时候我们需要实现一个功能,即二级下拉框的无刷新联动。这个功能常见于数据层级关系的展示,例如省份与城市、类别与子类别的选择等。用户在一级下拉框中选择一个选项时,二级下拉框会自动更新...

    layui-级联下拉框-可配置开启多选-HTML源码

    级联下拉框是一种常见的UI组件,它允许用户在一个下拉框的选择基础上动态加载并显示另一个相关的下拉框,这种联动效果在数据筛选、地区选择等场景中非常常见。 1. HTML基础: HTML(HyperText Markup Language)...

    jQuery解析xml文件,实现省市县三级联动下拉框

    总的来说,利用jQuery解析XML文件并实现省市县三级联动下拉框,需要理解XML结构,掌握jQuery的DOM操作和事件处理,以及良好的编程实践。这个过程对于提升前端开发技能,特别是数据处理和交互设计能力大有裨益。

    jsp实现连动下拉框

    - 创建两个下拉框,第一个下拉框加载表 A 的数据,第二个下拉框根据第一个下拉框的选择加载表 B 的数据。 - 使用 `onChange` 事件触发 JavaScript 代码,实现连动效果。 #### 6. JavaScript 代码解析 在提供的...

    jQuery下拉框二级三级城市联动插件.zip

    本资源"jQuery下拉框二级三级城市联动插件.zip"提供了一个实现多级联动下拉框功能的jQuery插件,适用于网页上的地区选择,如省份、城市、区县等。这种功能常见于电子商务网站、地图服务或者任何需要用户输入详细地址...

    省市联动三级下拉框.zip

    在前端开发中,省市联动下拉框通常通过JavaScript库或插件来实现,如jQuery、Vue.js、React.js等。这个“distpicker-master”很可能是一个基于jQuery的库,因为“distpicker”是jQuery Distpicker的简称,这是一个轻...

    下拉框年月日3级联动

    在提供的文件中,有两个资源:"jQuery年月日三级联动(生日)[无法初始化值]"和"js年月日三级联动下拉框选择日期插件"。这表明实现这一功能可能依赖于jQuery,一个广泛使用的JavaScript库,它简化了DOM操作和事件处理...

    C#中国地区三级联动下拉菜单

    3. **三级联动下拉菜单**:这是一种常见的地理选择功能,用户在第一个下拉菜单(省)中选择一个选项后,第二个下拉菜单(市)会根据所选省的数据自动更新;接着在市中选择后,第三个下拉菜单(区/县)也会相应更新。...

    Ajax 四级导航菜单ASP+Access动态版

    Ajax与ASP网页交互动态添加删除数据一例 Asp+Ajax无限级联动下拉框菜单Access版 ASP 树形菜单TreeView 多样式版 Ajax仿iGoogle双击编辑、网页拖动完整实例 ASP+jQuery无刷新读写数据库操作 Ajax提交数据实例_Ajax+...

    jQuery模拟select下拉框三级城市联动代码.zip

    4. 更新下拉框:根据当前选中的省份和城市,筛选出对应的区县列表,然后使用jQuery的`.html()`方法动态更新下拉框的选项。 5. 动画效果:为了提高用户体验,你还可以添加一些过渡动画,比如淡入淡出或者滑动效果,...

    jQuery多级联动美化版Select下拉框插件.zip

    二、多级联动原理 多级联动通常指的是两个或多个下拉框之间存在关联关系,当用户在一个下拉框中选择某个选项时,其他下拉框会根据预设的规则动态更新其选项。这种功能在数据层级结构复杂或者需要筛选特定范围的场景...

    javascript经典特效---下拉框的新特性.rar

    5. 模拟下拉框:JavaScript库如jQuery和Vue.js提供了更加灵活的组件,可以模拟出更加复杂的下拉框效果,如搜索过滤、分组选项、无限滚动等。 6. AJAX集成:通过AJAX技术,可以实现下拉框的异步加载,当用户开始输入...

    jquery 实现的下拉框模拟

    首先,原生的 HTML 下拉框虽然简单易用,但在某些情况下可能无法满足设计师和开发者的需求,例如自定义样式、多级联动、异步加载选项等。jQuery 提供的解决方案可以克服这些限制,通过编写少量代码实现复杂的功能。 ...

    jQuery制作简洁的多级联动Select下拉框

    2. 多级联动Select下拉框:多级联动是指一个表单中的多个下拉选择框根据用户的选择动态变化。通常,第一个下拉框(如省)的选择会影响第二个下拉框(如市)的选项,以此类推。这种功能可以极大地减少用户选择时的...

    struts2地市、县区二级联动下拉菜单 doubleselect标签

    `doubleselect`标签是Struts2自定义标签库的一部分,它允许开发者创建两个相关的下拉列表,当用户在第一个下拉框选择一个选项时,第二个下拉框的内容会相应地更新。这种联动效果能够提高用户界面的交互性和用户体验...

Global site tag (gtag.js) - Google Analytics