jQuery easyUI combobox实现二级联动

本例子用zendframework2实现的

//获取权限数据
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);
}

前端实现

<input id="dept" name="dept" class="easyui-combobox">
<input id="power" name="power" class="easyui-combobox">

<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>

文章来源: markwcm.blog.csdn.net，作者：黄啊码，版权归原作者所有，如需转载，请联系作者。

原文链接：markwcm.blog.csdn.net/article/details/80420853