struts2省市县级联

因群员强烈要求，闲了没事，写了这个demo，代码粗糙
原理：隐藏所有省市县select控件，在加载时候初始化省的option，显示市的 select控件 添加市的 change 事件，当触发市的 change 事件时候初始化 市的option ，显示县的 select控件，当然了每次需要清空option 不然叠加显示。其中json遍历有些烦选择正确的json格式（1.javascirpt数组json,2.javascirpt对象json）遍历方便一些。
demo所用技术:struts2,jquery-ajax,jsonf
附件为源码（测试通过，测试地址：http://localhost:8080/Demo/）：

原创,转载请加个人连接:http://demojava.iteye.com/blog/1402516

$(document).ready(function() {
$('#demo2').hide();
$('#demo3').hide();
$('#demo4').hide();
$('#demo1').click(function() {  
	$.ajax({
			type: "POST",
		 	url: "/Demo/myns/demo1.action",
		   	dataType : "json",	// 指定返回类型
			data: {},	// 传递到后台的参数
		   	success: function(data)	
		   	{
		   	var selector=$('#demo2');
		   	selector.empty();
		   		$.each(data, function(index,values){   // 解析出data对应的Object数组
		   			$.each(values,function(index2,value){   // 遍历Object数组 ，每个对象的值存放在value ，index2表示为第几个对象
						//alert(value.id + "  " + value.city);
						selector.append('<option value="'+value.id+'">'+value.city+'</option>');   
		   			});
		   		});
		   		$('#demo2').show();
		   	},
		   	error : function()
		   	{
		   		alert("系统出现问题");	
		   	}
	});	
	
	$('#demo2').change(function(){
	var param=$(this).children('option:selected').val();
		if($("#demo3").is(":visible"))
	   	{
	   		$('#demo4').empty();
	   		$('#demo4').hide();
	   	}
		$.ajax({
			type: "POST",
		 	url: "/Demo/myns/demo2.action",
		   	dataType : "json",	// 指定返回类型
			data: {demo2:param},	// 传递到后台的参数
		   	success: function(data)	
		   	{
		   	var selector=$('#demo3');
		   	selector.empty();
		   		$.each(data, function(index,values){   // 解析出data对应的Object数组
		   			$.each(values,function(index2,value){   // 遍历Object数组 ，每个对象的值存放在value ，index2表示为第几个对象
						//alert(value.id + "  " + value.city);
						selector.append('<option value="'+value.id+'">'+value.city+'</option>');   
		   			});
		   		});
		   		$('#demo3').show();
		   	},
		   	error : function()
		   	{
		   		alert("系统出现问题");	
		   	}
	});	
	});
	
	$('#demo3').change(function(){
	var param=$(this).children('option:selected').val();
		$.ajax({
			type: "POST",
		 	url: "/Demo/myns/demo3.action",
		   	dataType : "json",	// 指定返回类型
			data: {demo3:param},	// 传递到后台的参数
		   	success: function(data)	
		   	{
		   	var selector=$('#demo4');
		   	selector.empty();
		   		$.each(data, function(index,values){   // 解析出data对应的Object数组
		   			$.each(values,function(index2,value){   // 遍历Object数组 ，每个对象的值存放在value ，index2表示为第几个对象
						//alert(value.id + "  " + value.city);
						selector.append('<option value="'+value.id+'">'+value.city+'</option>');   
		   			});
		   		});
		   		$('#demo4').show();
		   	},
		   	error : function()
		   	{
		   		alert("系统出现问题");	
		   	}
	});	
	});
	
	
});
});

 

      <input id="demo1" type="button" name="Submit" value="加载">
      <select id="demo2" ></select>
      <select id="demo3" ></select>
      <select id="demo4" ></select>

 

评论

4 楼 chengyuanheng 2014-08-28  

测试地址 居然是localhost 你是有多水？

3 楼 demojava 2012-08-04  

$("#demo2").val();//获取选择select 的value值
$("#demo2").find("option:selected").text();//获取选择select 的text值

2 楼 ILoveDOUZHOU 2012-08-04  

页面怎么获取每个下拉框的值

1 楼 xyaidx 2012-06-20  

楼主，你何不放一个在线demo上去呢，或者整个截图也行啊