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"

攻克了!

希望这点给大家带来点帮助!

上一篇:h5移动端聊天室|仿微信界面聊天室|h5多人聊天室


下一篇:Android笔记(六十九) 仿微信界面(一)