JQuery打造下拉框联动效果

标签：blog   class   c   code   java   ext   

做联动效果，若是用纯JavaScript来做，往往需要辅助页面保存需要刷新的结果集，然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后，当前一个下拉框onchange后，同级的后面的下拉框全部清除，然后重新拼接刷新的内容。用JQuery实现比较容易，代码以省市联动效果为例实现。

JSP页面代码如下：

function refreshCity(){
	if($(‘#provinceCode‘).find(‘option:selected‘).val() == ""){
		$(‘#provinceCode‘).parent().nextAll(‘lable‘).remove();
		return;
	}	
	//省份名称
	var provinceName = $(‘#provinceCode‘).find(‘option:selected‘).text();
	provinceName = provinceName.substring(0,provinceName.length-4);	
	// 发出Json请求，查询子下拉框选项数据
	 $.getJSON("baseInfo_getCitiesByProvinceId", {
		 proviceCode : $(‘#provinceCode‘).val()
	}, function(data) {		
		// 如果有子选项，则创建子下拉框
		if(data != null){			
			// 删除下拉框父级后的所有同级
			$(‘#provinceCode‘).parent().nextAll(‘lable‘).remove();
			var childId = "city";
			// 判断是否存在下一级下拉框 不存在就创建
			if($(‘#‘+childId).length == 0){				
				// 创建一个
并创建一个添加到id为extra的
中
				$("

").appendTo($(‘#base‘));
			}else{
				//清空子下拉框内容
				 $(‘#‘ + childId).empty();
			}			
			// 遍历json串，填充子下拉框
			$.each(data.city, function(i, item) {
				$(‘#‘ + childId).append(
						"" + item.nameAndCode
								+ "");
			});
		}		
	});	
}

public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
	ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode);
	List cityList = this.provinceAndCityInfoService.getCityListByProperty("belongProvinceId", provinceInfo.getId()+"");	
	// 初始化准备输出的Json串
	String cityJson = "";
	// 遍历集合，构造json串
	if (cityList.size() > 0) {			
		cityJson = "{\"city\":[";		
		// 拼接查询到的子项
		for (int i = 0; i 







JQuery打造下拉框联动效果,搜素材,soscw.com
JQuery打造下拉框联动效果
标签：blog   class   c   code   java   ext   
原文地址：http://blog.csdn.net/liyong199012/article/details/26155157