ddddd

laravel-admin 省市区 三级 选择 select2 selected 无效问题解决方案

作者:程序员11 时间:2022-10-20 人气:393 QQ交流群\邮箱:1003265987@qq.com
laravel-admin 省市区 三级 选择 select2 selected 无效问题解决方案
要展示的内容

这里我使用的是 load 方式加载的三级联动 

Controller文件


use IlluminateHttpRequest;

use EncoreAdminLayoutContent;

 

    // 编辑方法

    public function edit($id, Content $content)

    {        

        return $content

            ->title($this->title())

            ->description($this->description['edit'] ?? trans('admin.edit'))

            ->body($this->form(true, $id)->edit($id));

     }


    //form

    protected function form($isEditing = false, $id = false)

    {

        $form = new Form(new xxxxx());


        if ($id) {

            $model = xxxxx::find($id);

        }


        // 修改地址

        if ($isEditing && $model->province) {


            $form->select('province', '省')->options('/admin/api/province/'.$model->province)->load('city', '/admin/api/city/'.$model->city)->required();


            $form->select('city', '市')->options(function($id){

                return Province::where('id' , $id)->pluck('name' , 'id');

            })->load('area', '/admin/api/area/'.$model->area)->required();


            $form->select('area', '区县')->options(function($id){

                return Province::where('id' , $id)->pluck('name' , 'id');

            })->required();


        } else {


            $form->select('province', '省')->options(

                Province::where(['city'=>0])->pluck('name', 'id')

            )->load('city', '/admin/api/city')->required();


            $form->select('city', '市')->load('area', '/admin/api/area')->required();


            $form->select('area', '区县')->required();

        }


    }

api方法


 public function getProvince($id = false,Request $request)

    {

        $province = Province::where(['city'=>0])->get(['id', 'name AS text']);  

        if ($id) {

            foreach ($province as $key) {

                if ($key->id == $id) {

                    $key->selected = true; 

                }

            }

        }

        return $province;

    }

api数据返回格式

[{

    "id": 781,

    "text": "黄浦区"

}, {

    "id": 782,

    "text": "徐汇区",

  // 原本默认选中 增加 selected true就可以了

    "selected": true

}, {

    "id": 783,

    "text": "长宁区"

}]

select2 手册地址:https://select2.org/programmatic-control/add-select-clear-items

本来在返回数据中 增加 

    selected : true

就可以默认选择的不知道为什么突然不行了 找了一下网上的几种解决方式 试了一下都不太好用不过提供了一些解决思路

去翻阅 select2 的手册的时候发现了 可以使用 来动态设置默认值

$('#mySelect2').val(['1', '2']);

$('#mySelect2').trigger('change');

于是就去 vendorencorelaravel-adminsrcFormFieldSelect.php

里面调试了起来 感觉可能是 

province
city
area

这三个关键字影响了 因为在我接口里面返回的只有id 和 值 但是在插件生成的html 中 多了地区编号等数据 例如  data-value="782,310104,徐汇区,31,01,04,0"


<select class="form-control area select2-hidden-accessible" style=" 100%;" name="area" required="1" data-value="782,310104,徐汇区,31,01,04,0" tabindex="-1" aria-hidden="true">

    <option value="781">黄浦区</option>

    <option value="782">徐汇区</option>

    <option value="783">长宁区</option>

    <option value="784">静安区</option>

</select>

在vendorencorelaravel-adminsrcFormFieldSelect.php 文件的 load() 方法中 console.log() 的时候 发现 

$(target).val(target.data('value')); 里面 target.data('value') 的值是  "782,310104,徐汇区,31,01,04,0" 这明显是和我数据的值是对不上的 于是强行获取并修改了下 load方法

public function load($field, $sourceUrl, $idField = 'id', $textField = 'text', bool $allowClear = true)

    {

        if (Str::contains($field, '.')) {

            $field = $this->formatName($field);

            $class = str_replace(['[', ']'], '_', $field);

        } else {

            $class = $field;

        }


        $placeholder = json_encode([

            'id'   => '',

            'text' => trans('admin.choose'),

        ]);


        $strAllowClear = var_export($allowClear, true);


        $script = <<<EOT

$(document).off('change', "{$this->getElementClassSelector()}");

$(document).on('change', "{$this->getElementClassSelector()}", function () {

    var target = $(this).closest('.fields-group').find(".$class");

    // 修改后新增代码

    var selected_value = null;

    $.get("$sourceUrl",{q : this.value}, function (data) {

        target.find("option").remove();

        $(target).select2({

            placeholder: $placeholder,

            allowClear: $strAllowClear,

            data: $.map(data, function (d) {

                d.id = d.$idField;

                d.text = d.$textField;

                // 修改后新增代码

                if (d.selected) {

                    selected_value = d.id;

                }

                return d;

            })

        });

        if (target.data('value')) {

            // 源代码

            // $(target).val(target.data('value'));

            // 修改后新增代码

            $(target).val(selected_value);

        }

        $(target).trigger('change');

    });

});

EOT;


        Admin::script($script);


        return $this;

    }


温馨提示:

欢迎阅读本文章,觉得有用就多来支持一下,没有能帮到您,还有很多文章,希望有一天能帮到您。

laravel-admin 省市区 三级 选择 select2 selected 无效问题解决方案---相关文章


评论区

ddddd

程序员-学习的网站-想学习编程的码农可以进来看看

首页

视频教程

购物车

我的订单