首页 > Web开发 > 详细

JQuery EasyUI Combobox 实现省市二级联动菜单

时间:2015-06-25 19:44:00      阅读:589      评论:0      收藏:0      [点我收藏+]

//编辑修改或新增页面联动可以这样写

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"

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


JQuery EasyUI Combobox 实现省市二级联动菜单

原文:http://my.oschina.net/ydsakyclguozi/blog/470834

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!