easyui省市二级联动

1、[html]
<table cellspacing="15px">
   <tr>
       <td>所属区域:</td>
       <td>
           <input class="easyui-textbox" type="text" style="width:100px;" id="selfmedia_toutiaouser_province" data-options="required:true"></input>
           <input class="easyui-combobox" type="text" style="width:100px;" id="selfmedia_toutiaouser_city" data-options="required:true"></input>
       </td>
   </tr>
</table>

2、[js]
<script>
   // 省市二级联动
    $('#selfmedia_toutiaouser_province').combobox({
       valueField:'id', //值字段
       textField:'name', //显示的字段
       url:'/selfmedia/toutiao/getprovincecity',
       panelHeight:'200px', //下拉选择框的高度,auto自动
       required:true,   //是否必选
       editable:false,//不可编辑，只能选择
       onChange:function(pid){
           //$('#selfmedia_toutiaouser_city').combobox('clear');
           $('#selfmedia_toutiaouser_city').combobox({
           valueField:'id', //值字段
           textField:'name', //显示的字段
           url:'/selfmedia/toutiao/getprovincecity?pid='+pid,
           panelHeight:'200px',
           required:true,
           editable:false,//不可编辑，只能选择
           //value:'--请选择--'
           });
       }
   });
</script>

3、[PHP]
   /**
   * @todo 得到省市信息，
   * 根据参数pid是否存在判断是省还是市
   */
   public function getprovincecityAction(){
       $pid = isset($_GET['pid']) ? (int)$_GET['pid'] : '';
       $where = [];
       $mArea = new AreaModel();
       if($pid){
           $info = $mArea->getOne([['id', $pid]]);
           $type = $info['type'];
           if($type == 3 || $type == 4 ){   //没有市的直接返回自己
               die(json_encode([['id'=>$info['id'],'name'=>$info['name']]]));
           }else{
               $where[] = ['pid', $pid];
           }
       }else{
           $where[] = ['pid', 0];
       }

       $areaList = $mArea->getList( $where, 'id,name');
       die(json_encode($areaList));
   }

4、[省市数据表结构]
   CREATE TABLE `area` (
      `id` smallint(11) unsigned NOT NULL COMMENT 'id',
      `pid` smallint(3) unsigned NOT NULL COMMENT '父id',
      `name` varchar(20) NOT NULL COMMENT '名称',
      `type` tinyint(1) NOT NULL COMMENT '类型',
      `tel_code` char(5) NOT NULL DEFAULT '' COMMENT '区号',
      `district` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '大区',
      PRIMARY KEY (`id`),
      KEY `pid` (`pid`)
   ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='区域表';

5、[返回数据示例]
[{"id":83,"name":"\u957f\u6625"},{"id":84,"name":"\u5409\u6797"},{"id":85,"name":"\u56db\u5e73"},{"id":86,"name":"\u8fbd\u6e90"},{"id":87,"name":"\u901a\u5316"},{"id":88,"name":"\u767d\u5c71"},{"id":89,"name":"\u677e\u539f"},{"id":90,"name":"\u767d\u57ce"},{"id":91,"name":"\u5ef6\u8fb9"}]

easyui省市二级联动

猜你喜欢