省市二级联动--使用app-jquery-cityselect.js插件
2016-11-04 17:33
721 查看
只有省市二级联动,三级联动还没处理好,会尽快完善。
嵌入id:
编写js:
加载省份为内蒙古的地级市数据:${aapi}/area/city/" + provinceId(传入内蒙古的id)
请求成功后的效果如下图。
嵌入id:
<div class="form-group"> <label>地址</label> <p>从:</p> <div class="input-group"> <input id="areaIdFrom" name="areaIdFrom" type="hidden" value="" /> <input id="provinceFrom" name="provinceFrom" type="hidden" /> <input id="cityFrom" name="cityFrom" type="hidden" /> <div id="areaGroupFrom"></div> </div> <input type="text" class="form-control" name="addressFrom"/> <p>到:</p> <div class="input-group"> <input id="areaIdTo" name="areaId" type="hidden" value="" /> <input id="provinceTo" name="province" type="hidden" /> <input id="cityTo" name="city" id="moveCity" type="hidden" /> <div id="areaGroupTo"></div> </div> <input type="text" class="form-control" name="address" id="moveAddress"/> </div>
编写js:
<script type="text/javascript"> var areaIdFrom = $("#areaIdFrom"); var provinceFrom = $("#provinceFrom"); var cityFrom = $("#cityFrom"); var areaIdTo = $("#areaIdTo"); var provinceTo = $("#provinceTo"); var cityTo = $("#cityTo"); $("#areaGroupFrom").cityselect({ loadProvince: handleLoadProvince, loadCity: handleLoadCity, onAreaIdChanged: function(id) { areaIdFrom.val(id); }, onProvinceChanged: function(id, name) { provinceFrom.val(name); }, onCityChanged: function(id, name) { cityFrom.val(name); } }); $("#areaGroupTo").cityselect({ loadProvince: handleLoadProvince, loadCity: handleLoadCity, onAreaIdChanged: function(id) { areaIdTo.val(id); }, onProvinceChanged: function(id, name) { provinceTo.val(name); }, onCityChanged: function(id, name) { cityTo.val(name); } }); function handleLoadProvince() { var list = []; $.HTTP.list({ url: "${aapi}/area/province", //${aapi}/area/province success: function(l) { list = l; } }); return list; } function handleLoadCity(provinceId) { var list = []; $.HTTP.list({ url: "${aapi}/area/city/" + provinceId, // ${aapi}/area/city/ success: function(l) { list = l; } }); return list; } </script>
加载省份数据:${aapi}/area/province
加载省份为内蒙古的地级市数据:${aapi}/area/city/" + provinceId(传入内蒙古的id)
请求成功后的效果如下图。
相关文章推荐
- 省市区三级联动插件:app-jquery-cityselect.js
- 省市区选择插件jquery.cityselect.js的使用示例
- jquery使用jquerydoubleselectmin.js实现二级菜单联动
- jquery插件-cityselect.js扩展(支持4层联动)
- select三级联动结合jquery的chosen.jquery.js 插件一起使用原创案例
- jquery.cityselect.js基于jQuery+JSON的省市-自定义联动效果
- jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果
- 一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果
- jquery省市区三级联动插件CitySelect笔记
- html js jquery省市的二级联动
- JavaScript学习——使用JS完成省市二级联动
- mvc中大类和小类二级联动下拉框使用 select2 插件的初始加载方法
- jQuery学习(六)——使用JQ完成省市二级联动
- js json省市二级联动菜单(json+select)
- jquery.cxselect.js的使用案例 (动态数据的三级联动)
- jquery省市二级联动插件
- 操作select的jquery插件 注意:使用时请保持JS文件的编码和你程序的编码一致...
- jquery省市二级联动插件 2
- jquery.cityselect.js城市插件
- select 无限级联动。省市县三级联动。jquery插件