电商商家后台-easyUI的combox三级联动

这几天在做项目中又用到了easyUI，以前做ITOO的时候前端都是被封装好的，而且也没有真正接触过三级联动效果。这个三级联动是要实现的是省市县联动。选择某一个省时跟着相应的市显示，接着相应的县显示。

不仅是这样，因为做的是修改功能，所以不仅要把查出来的省，市，县显示出来，而且从数据库中查询来的地区需要成为默认显示值。也就是说从数据库中查出来的地区跟查出来的所有省市区做对比，是数据库中地区显示为默认。举个例子，数据库中存的是河北省廊坊市燕郊区，那么显示在界面上的默认值也必须是河北省廊坊市燕郊区。这也是在我实现中刚开始挺头疼的一件事，后来经过查询其实挺简单的。

首先我把从数据库中查询出来的地区，存放到界面上并隐藏起来，然后把从数据库中查询出来的所有省份显示到界面上。其次用JS代码获取隐藏的地区，并设置这些地区在下拉框中默认为选中。

JSP代码：

<tr>
   <td id="area">
	<input id="shengyincang" style="display:none;" value="${sheng}"/>
	<input id="shiyincang" style="display:none;" value="${shi}"/>
	<input id="xianyincang" style="display:none;" value="${xian}"/>
	所在地区:
   </td>
   <td><select id="sheng" class="easyui-combobox" name="sheng">
        <c:forEach var="catage" items="${requestScope.shengList}" varStatus="status">
	<option style=" width: 100px;" value="${catage.iD}">${catage.province_city}</option>
	</c:forEach>
	</select>
	 <input id="shi" class="easyui-combobox"  name="shi"/>
	 <input id="xian" class="easyui-combobox"  name="xian"/>
	 <span id="cityTip"></span>
   </td>
</tr>

JS代码：其实JS代码实现的很简单，因为EasyUI的封装功能真的是很强大啊。

window.onload=function(){

	//获取界面上隐藏的地区
	var shengUID=$("#shengyincang").val();
	var shiUID=$("#shiyincang").val();
	var xianUID=$("#xianyincang").val();
	//var opts=document.getElementById("sheng");
	//设置地区被选中
	$("#sheng").combobox('select',shengUID);
	$("#shi").combobox('select',shiUID);
	$("#xian").combobox('select',xianUID);

}

//三级联动事件，选择省份，相应所有市跟着出来，选中市相应的县跟着出来。
$(function(){
		//触发省选项
		$("#sheng").combobox({
			onSelect:function(record){
				$("#shi").combobox("setValue",''); //清空市
				$("#xian").combobox("setValue",''); //清空县
				var shengid=$('#sheng').combobox('getValue');

				$.ajax({
					async:false,
					url:"personalprofile_findshi.action",
					data:{shengid:shengid},
					type:"POST",
					dataType:"json",
					success:function(data){
						//alert(data);
						$("#shi").combobox("loadData",data);
					}

				});
			}

		});
		$('#shi').combobox({
		    editable:false, //不可编辑状态
		    cache: false,
		    panelHeight: '150',//自动高度适合
		    valueField:'iD',
		    textField:'province_city'
		   }); 

		//触发市选项时
		$("#shi").combobox({
			onSelect:function(record){
				$("#xian").combobox("setValue",''); //清空县
				var shiid=$('#shi').combobox('getValue');

				$.ajax({
					async : false,
					url:"personalprofile_findxian.action",
					cache:false,
					data:{shiid:shiid},
					type:"POST",
					dataType:"json",
					success:function(data){
						$("#xian").combobox("loadData",data);
					}

				});
			}
		});

		$('#xian').combobox({
		    editable:false, //不可编辑状态
		    cache: false,
		    panelHeight: '150',//自动高度适合
		    valueField:'iD',
		    textField:'province_city'
		   });
});

最后上图：

封装的固然好，但是尝试着去了解底层，因为只有掌握了底层，我们才能运筹帷幄。以前做ITOO的时候没觉得什么，后来做这个项目才发现ITOO封装的太好了，自己了解的太少了，以至于这个项目做起来有点儿生疏。

版权声明：本文为博主原创文章，未经博主允许不得转载。