activeform三级联动 [ 2.0 版本 ]

为了自我学习和交流PHPjQuery,Linux,lamp,shell,JavaScript,服务器)等一系列的知识,希望光临本博客的人可以进来交流。寻求共同发展。搭建平台。本人博客也有许多的技术文档,希望可以为你提供一些帮助。


QQ群: 191848169   点击链接加入群【PHP技术交流(总群)】




参考问题yii2选择地区时如何实现三级联动

表结构

$this->createTable('{{%area}}', [
    'id' => $this->primaryKey(6),
    'name' => $this->string(45),
    'pid' => $this->integer(6),
    'code' => $this->string(5),
    'level' => $this->integer(1),
    'typename' => $this->string(4),
], $tableOptions);

需要在表单页面中地址能显示到默认的位置

已经解决了,有空把解决就把解决方案以视频形式发出来

解决方式:

1.在模型中定义省市区三个字段,并在afterFind方法中给新增字段赋值

class UserInformation extends \yii\db\ActiveRecord
{
    public $province_area_id = 0;
    public $city_area_id = 0;
    public $county_area_id = 0;

    public function afterFind()
    {
        parent::afterFind(); // TODO: Change the autogenerated stub
        $this->setProvinceCityCounty($this->area_id);
    }

    private function setProvinceCityCounty($area_id)
    {
        $Area = new Area();
        $area_info = $Area::findOne($area_id);
        if($area_info){
            switch($area_info->level){
                case 1:
                    $this->province_area_id = $area_info->id;
                    break;
                case 2:
                    $this->province_area_id = $area_info->pid;
                    $this->city_area_id = $area_info->id;
                    break;
                case 3:
                    $this->province_area_id = $Area::getParentId($area_info->pid);
                    $this->city_area_id = $area_info->pid;
                    $this->county_area_id = $area_info->id;
                    break;
            }
        }
    }
    ...
}

2.在Area模型中实现获取子列表方法

/**
 * This is the model class for table "{{%area}}".
 *
 * @property integer $id
 * @property string $name
 * @property integer $pid
 * @property string $code
 * @property integer $level
 * @property string $typename
 */
class Area extends \yii\db\ActiveRecord
{
    public $select_head = [
        ["id"=>0, "name"=>"请选择"],
        ["id"=>0, "name"=>"请选择省"],
        ["id"=>0, "name"=>"请选择市"],
        ["id"=>0, "name"=>"请选择区"],
    ];
    ...
    /**
     * 获取子列表
     * @param $pid
     * @return static[]
     */
    public static function getChildrenList($pid,$level=0)
    {
        $x[] = (new static)->select_head[$level];
        return array_merge($x,static::findAll(['pid'=>$pid]));
    }
}

3.用Html::activeDropDownList组件实现可编辑样式的下拉框,其中用onchange方法来实现ajax获取子列表,组件会根据值来设置默认选中的地区

<?= $form->field($UserInformation, 'area_id', [
                        'template'=>'{label}<div id="area_linkage"><div class="col-sm-3">'.
                            Html::activeDropDownList($UserInformation,'province_area_id', ArrayHelper::map($Area::getChildrenList(0,1), 'id', 'name'), [
                                'class' => 'form-control',
                                'onchange' => '
                                    $("#userinformation-area_id").val($(this).val());
                                    $.ajax({
                                        type:"post",
                                        url:"'.Yii::$app->urlManager->createUrl('/usercenter/area/ajax-post-children-area').'",
                                        data:{pid:$(this).val(),level:2},
                                        success:function(msg){
                                            $("#userinformation-city_area_id").html(msg);
                                            $("#userinformation-county_area_id").html(\'<option value="0">请选择区</option>\');
                                        }
                                    });
                                ',
                            ])
                            .'</div><div class="col-sm-3">'.
                            Html::activeDropDownList($UserInformation,'city_area_id', ArrayHelper::map($Area::getChildrenList($UserInformation->province_area_id,2), 'id', 'name'), [
                                'class' => 'form-control',
                                'onchange' => '
                                    $("#userinformation-area_id").val($(this).val());
                                    $.ajax({
                                        type:"post",
                                        url:"'.Yii::$app->urlManager->createUrl('/usercenter/area/ajax-post-children-area').'",
                                        data:{pid:$(this).val(),level:3},
                                        success:function(msg){
                                            $("#userinformation-county_area_id").html(msg);
                                        }
                                    });
                                ',
                            ])
                            .'</div><div class="col-sm-3">'.
                            Html::activeDropDownList($UserInformation,'county_area_id', ArrayHelper::map($Area::getChildrenList($UserInformation->city_area_id,3), 'id', 'name'), [
                                'class' => 'form-control',
                                'onchange' => '
                                    $("#userinformation-area_id").val($(this).val());
                                ',
                            ])
                            .'</div><div class="hidden" id="parent_div_area_id">{input}</div></div>',
])->hiddenInput(); ?>

/usercenter/area/ajax-post-children-area方法:

class AreaController extends UserCenterController
{
    public function actionAjaxPostChildrenArea()
    {
        if(\Yii::$app->request->isAjax){
            $pid = \Yii::$app->request->post('pid');
            $level = \Yii::$app->request->post('level');
            $area_children = Area::getChildrenList($pid,$level);
            $option = "";
            if(count($area_children)>0){
                foreach($area_children as $k => $v){
                    $option .= Html::tag('option',Html::encode($v['name']),['value'=>$v['id']]);
                }
            }
            echo $option;
        }
    }
}

JS三级联动表单 <!-- var arrText = new Array(5); var arrValue = new Array(arrText.length); function objSetOption(select1, select2, select3) { this.select1 = select1; this.select2 = select2; this.select3 = select3; } arrText[0]= new objSetOption("选择1:", "选择2_1:,选择2_2:", "选择3_1:,选择3_2:"); arrText[1] = new objSetOption("论文:1", "语文:1,数学:2,英语:3", "初中:2,高中:3"); arrText[2] = new objSetOption("例题:2", "显示b2_1:值b2_1,显示b2_2:值b2_2", "显示b3_1:值b3_1,显示b3_2:值b3_2"); arrText[3] = new objSetOption("显示c:值c", "显示c2_1:值c2_1,显示c2_2:值c2_2", "显示c3_1:值c3_1,显示c3_2:值c3_2"); arrText[4] = new objSetOption("显示d:值d", "显示d2_1:值d2_1,显示d2_2:值d2_2", "显示d3_1:值d3_1,显示d3_2:值d3_2"); arrText[5] = new objSetOption("显示e:值e", "显示e2_1:值e2_1,显示e2_2:值e2_2", "显示e3_1:值e3_1,显示e3_2:值e3_2"); function select() { var eltSelect1 = document.test.select1; var eltSelect2 = document.test.select2; var eltSelect3 = document.test.select3; var arrSelect1, arrSelect2, arrSelect3; var arrData1, arrData2, arrData3; with(eltSelect1) { var strSelect = options[selectedIndex].value; } for(i = 0;i < arrText.length;i ++) { arrSelect1 = arrText[i].select1; arrData1 = arrSelect1.split(":"); if (arrData1[1] == strSelect) { arrSelect2 = (arrText[i].select2).split(","); for(j = 0;j < arrSelect2.length;j++) { arrData2 = arrSelect2[j].split(":"); with(eltSelect2) { length = arrSelect2.length; options[j].text = arrData2[0]; options[j].value = arrData2[1]; } } arrSelect3 = (arrText[i].select3).split(","); for(j = 0;j < arrSelect3.length;j++) { arrData3 = arrSelect3[j].split(":"); with(eltSelect3) { length = arrSelect3.length; options[j].text = arrData3[0]; options[j].val
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值