概述
这几天在做项目中又用到了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.οnlοad=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封装的太好了,自己了解的太少了,以至于这个项目做起来有点儿生疏。
最后
以上就是平常水杯为你收集整理的电商商家后台-easyUI的combox三级联动的全部内容,希望文章能够帮你解决电商商家后台-easyUI的combox三级联动所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复