首页 > 代码库 > JQuery EasyUI Combobox 实现省市二级联动菜单
JQuery EasyUI Combobox 实现省市二级联动菜单
//编辑修改或新增页面联动可以这样写
jQuery(function(){ // 省级 $(‘#province‘).combobox({ valueField:‘itemvalue‘, //值字段 textField:‘itemtext‘, //显示的字段 url:‘/user/sort/province_list‘, panelHeight:‘auto‘, required:true, editable:true,//不可编辑,只能选择 value:‘${user.province}‘, onChange:function(province){ //$(‘#city‘).combobox(‘clear‘); $(‘#city‘).combobox({ valueField:‘itemvalue‘, //值字段 textField:‘itemtext‘, //显示的字段 url:‘/user/sort/city_list?province=‘+province, panelHeight:‘auto‘, required:true, editable:true,//不可编辑,只能选择 value:‘--请选择--‘ }); } }); //县市区 $(‘#city‘).combobox({ valueField:‘itemvalue‘, //值字段 textField:‘itemtext‘, //显示的字段 url:‘/user/sort/city_list?province=${user.province}‘, panelHeight:‘auto‘, required:true, editable:true,//不可编辑,只能选择 value:‘${user.city}‘ }); }); // 表单table <tr> <td align="right">地区 省级</td> <td align="left"> <input type="text" id="province" name="province" style="width: 128px" class="easyui-validatebox" validType="selectValid[‘--请选择--‘]" /> </td> </tr> <tr> <td align="right">地区 县市区</td> <td align="left"> <input type="text" id="city" name="city" style="width: 128px" class="easyui-validatebox" validType="selectValid[‘--请选择--‘]"/> </td> </tr>
查看页面 可以这样写
jQuery(function(){
// 省级
$(‘#province‘).combobox({
valueField:‘itemvalue‘, //值字段
textField:‘itemtext‘, //显示的字段
url:‘/user/sort/province_list‘,
panelHeight:‘auto‘,
required:true,
editable:false,//不可编辑,只能选择
value:‘${user.province}‘
});
//县市区
$(‘#city‘).combobox({
valueField:‘itemvalue‘, //值字段
textField:‘itemtext‘, //显示的字段
url:‘/user/sort/city_list?province=${user.province}‘,
panelHeight:‘auto‘,
required:true,
editable:false,//不可编辑,只能选择
value:‘${user.city}‘
});
});
// 表单Table
<tr>
<td align="right">地区 省级</td>
<td align="left">
<input type="text" id="province" name="province"
class="easyui-validatebox" validType="selectValid[‘--请选择--‘]" disabled="disabled"/>
</td>
</tr>
<tr>
<td align="right">地区 县市区</td>
<td align="left">
<input type="text" id="city" name="city"
class="easyui-validatebox" validType="selectValid[‘--请选择--‘]" disabled="disabled"/>
</td>
</tr>
上述代码是边学习EasyUI,边总结的,如有不足之处,请谅解!
注意:联动的时候,最好给组合框都设置宽度,因为我做的时候发现不设置宽度,省级联动城市的时候,城市组合框宽度会越来越短,设置宽度
style="width: 128px"
解决了!希望这点给大家带来点帮助!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。