前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery easyUI combobox实现二级联动

jQuery easyUI combobox实现二级联动

作者头像
黄啊码
发布2020-05-29 10:44:20
1.9K0
发布2020-05-29 10:44:20
举报
文章被收录于专栏:黄啊码【CSDN同名】

本例子用zendframework2实现的

代码语言:javascript
复制
//获取权限数据
function getpowerAction()
{
    $this->_helper->layout->disableLayout();
    $this->_helper->viewRenderer->setNoRender();//传json加入这句
    $id = $this->_request->getParam('depatId');//传值到后台
    $data = array(
        array('id'=>1,'value'=> array(array('id'=>1,'power'=>'权限1'),array('id'=>2,'power'=>'权限2'),array('id'=>3,'power'=>'权限3'))),
        array('id'=>2,'value'=> array(array('id'=>1,'power'=>'权限4'),array('id'=>2,'power'=>'权限5'),array('id'=>3,'power'=>'权限6')))
    );
    $temp=array();
    foreach($data as $d){
        if($d['id']==$id){
            $temp=$d["value"];
        }
    }
    echo json_encode($temp);
}

前端实现

代码语言:javascript
复制
<input id="dept" name="dept" class="easyui-combobox">
<input id="power" name="power" class="easyui-combobox">
代码语言:javascript
复制
<script>
    $(function(){
         $('#dept').combobox({
            url:'/small/html/test/gettype',
            editable:false,
            valueField:'id',
            textField:'userType',
            onLoadSuccess: function () { //加载完成后,val[0]写死设置选中第一项
                 var val = $(this).combobox("getData");
                 for (var item in val[0]) {
                     if (item == "id") {
                         $(this).combobox("select", val[0][item]);
                     }
                 }
            },
            onSelect:function(){
                //刷新数据,重新读取省份下的城市,并清空当前输入的值
                $('#power').combobox({
                    disabled:false,
                    url:'/small/html/test/getpower/depatId/'+$('#dept').combobox("getValue"),
                    valueField:'id',
                    textField:'power',
                    onLoadSuccess: function () { //加载完成后,val[0]写死设置选中第一项
                        var val = $(this).combobox("getData");
                        for (var item in val[0]) {
                            if (item == "id") {
                                $(this).combobox("select", val[0][item]);

                            }
                        }
                    }
                }).combobox("clear");
            }
        });

    });
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/05/23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档