因群员强烈要求,闲了没事,写了这个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>