EasyUI——combobox级联

来源：互联网发布：儿童绘画软件绿色编辑：程序博客网时间：2024/05/16 19:48

Easy UI的combobox实现省市县的级联选择

js部分：

<script type="text/javascript">$(function(){var province = $("#province").combobox({valueField:'areaId',textField:'name',url:'do_cascade.jsp?id=0',onChange:function(newValue, oldValue){            $.get('do_cascade.jsp',{id:newValue},function(data){                city.combobox("clear").combobox('loadData',data);                county.combobox("clear");            },'json');        },        //使用onSelect不能实现第一层与第三层的联动/* onSelect:function(rec){var url = "do_cascade.jsp?id="+rec.areaId;$("#city").combobox('reload',url);}, */onLoadSuccess:onLoadSuccess});var city = $("#city").combobox({valueField:'areaId',textField:'name',/* onSelect:function(rec){var url = "do_cascade.jsp?id="+rec.areaId;$("#county").combobox('reload',url);}, */onChange:function(newValue, oldValue){            $.get('do_cascade.jsp',{id:newValue},function(data){                country.combobox("clear").combobox('loadData',data);            },'json');        },onLoadSuccess:onLoadSuccess});var country = $("#county").combobox({valueField:'areaId',textField:'name',onLoadSuccess:onLoadSuccess});});function onLoadSuccess(){var target = $(this);var data = target.combobox("getData");var options = target.combobox("options");if(data && data.length>0){var fs = data[0];target.combobox("setValue",fs[options.valueField]);}}</script>

html部分

<body>省份：<input id="province" style="width: 80px;">市区：<input id="city" style="width: 80px;">县城：<input id="county" style="width: 80px;"></body>

jsp处理页面

String idStr = request.getParameter("id");int id=0;if(idStr!=null || !idStr.equals("")){id = Integer.parseInt(idStr);}AreaDao ad = new AreaDaoImpl();List<Area> areas = ad.findChildById(id);Gson gson = new Gson();String json = gson.toJson(areas);System.out.print(json);out.print(json);

sql语句

select * from area where parentid=? order by vieworder

onLoadSuccess方法实现初始化时加载初始数据

0 0