Laravel+KendoUI MultiSelect新增项提交至控制器存储至数据库

我来帮你把这个流程补全，从前端提交新值到Laravel后端存储，再到前端更新MultiSelect，一步一步搞定：

1. 完善前端addNew函数 #

你的无数据模板已经做好了触发按钮，接下来需要补全addNew函数的AJAX提交逻辑，还要处理后端响应后的前端更新：

function addNew(multiSelectId, newItemText) {
    // 先做基础校验，避免空值提交
    if (!newItemText.trim()) {
        alert("请输入有效的项目名称");
        return;
    }

    // 获取Laravel要求的CSRF令牌（确保页面头部已经引入这个meta标签）
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    // 发送POST请求到后端
    $.ajax({
        url: '/multi-select-items', // 这个地址要和后面Laravel的路由对应
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrfToken
        },
        data: {
            text: newItemText // 提交的字段名，和后端验证规则对应
        },
        success: function(response) {
            // 成功添加后，把新选项加入MultiSelect并选中
            const multiSelect = $("#" + multiSelectId).data("kendoMultiSelect");
            const newOption = { id: response.id, text: response.text };
            
            multiSelect.dataSource.add(newOption);
            multiSelect.dataSource.sync();
            multiSelect.value([...multiSelect.value(), newOption.id]);

            alert("新项目已成功添加！");
        },
        error: function(xhr) {
            // 友好提示错误信息
            const errorMsg = xhr.responseJSON?.message || "添加失败，请稍后重试";
            alert(errorMsg);
        }
    });
}

另外，确保你的页面头部已经包含Laravel的CSRF meta标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

2. 配置Laravel路由 #

在routes/web.php中添加POST路由，指向对应的控制器方法：

use App\Http\Controllers\MultiSelectItemController;

Route::post('/multi-select-items', [MultiSelectItemController::class, 'store'])->name('multi-select-items.store');

3. 创建控制器并处理存储逻辑 #

首先生成控制器（如果还没有的话）：

php artisan make:controller MultiSelectItemController

然后在app/Http/Controllers/MultiSelectItemController.php中编写store方法：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\MultiSelectItem;

class MultiSelectItemController extends Controller
{
    public function store(Request $request)
    {
        // 验证输入合法性，避免重复提交
        $validated = $request->validate([
            'text' => 'required|string|max:255|unique:multi_select_items,text',
        ]);

        // 创建新记录并保存到数据库
        $item = MultiSelectItem::create($validated);

        // 返回新创建的项的ID和文本，供前端更新MultiSelect
        return response()->json([
            'id' => $item->id,
            'text' => $item->text,
            'message' => '项目添加成功'
        ], 201);
    }
}

4. 创建模型和数据库迁移 #

如果还没有对应的数据表，先生成模型和迁移文件：

php artisan make:model MultiSelectItem -m

打开生成的迁移文件（路径：database/migrations/xxxx_xx_xx_create_multi_select_items_table.php），修改up方法定义表结构：

public function up()
{
    Schema::create('multi_select_items', function (Blueprint $table) {
        $table->id();
        $table->string('text')->unique(); // 存储新添加的文本，设置唯一约束避免重复
        $table->timestamps();
    });
}

然后运行迁移创建数据表：

php artisan migrate

最后在app/Models/MultiSelectItem.php中设置可填充字段：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class MultiSelectItem extends Model
{
    use HasFactory;

    protected $fillable = ['text']; // 允许批量赋值的字段
}

额外注意点 #

• 确保你的KendoUI MultiSelect数据源配置了正确的字段映射（比如dataValueField: "id"和dataTextField: "text"）
• 如果MultiSelect使用的是远程数据源，dataSource.sync()会自动刷新数据源，后续打开下拉框能看到新添加的项
• 可以根据需求替换alert为更友好的弹窗组件，比如KendoUI自己的Notification组件

内容的提问来源于stack exchange，提问作者user7678643