使用 select2 和 ajax laravel 资源进行多选
Posted
技术标签:
【中文标题】使用 select2 和 ajax laravel 资源进行多选【英文标题】：Multi select with select2 and ajax laravel resource 【发布时间】：2020-10-28 03:18:42 【问题描述】：对于我的系列形式，我需要让所有演员都准备好进行选择。我有很多演员，我需要用 api 来获取他们。
我做了一个演员资源：
<?php
namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\JsonResource;
class ActorResource extends JsonResource
/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request $request
* @return array
*/
public function toArray($request)
// return parent::toArray($request);
return [
'id'=> $this->id,
'name'=> $this->name,
];
有路线：
Route::get('/actor', function ()
return ActorResource::collection(Actor::all());
);
Route::get('/actor/actor', function (Actor $actor)
return new ActorResource($actor);
);
在我的刀片中：
<label for="creators" class="label">Créateur</label>
<select class="form-control tags-selector" id="creators" name="creators[]" multiple="multiple">
</select>
<script>
$(document).ready(function()
$('.tags-selector').select2(
minimumInputLength: 2,
ajax:
url: '/api/actor',
dataType: 'json',
delay: 250,
,
);
);
</script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
什么都没有工作......我怎样才能在之后获得选定的值？
这是对大表进行多选的正确方法吗？
【问题讨论】：
你不应该把成功方法放在ajax中还是我错过了什么？ 我不知道，这对我来说都是新的..我该怎么说？ 【参考方案1】：$(document).ready(function()
$('.tags-selector').select2(
minimumInputLength: 2,
$.ajax:
method:'get'// I am assuming this is a get method
url: '/api/actor',
dataType: 'json',
delay: 250,
success: function (data)
console.log(data)//after you see the structure of data, try smt like
//this. You should change this part acording yo your data
for(int i =0;i<data.data.lenght;i++)
$("#creators").append(new Option(data.data[i].name, data.data[i].id));
,
error: function (error)
console.log(error);
,
,
);
);
嗯，希望对你有帮助。我也不是他们的专家。让我知道它是否有效 更新
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="box" onkeydown="asd()" />
<select name="asd" id="select_box">
</select>
<script>
function asd()
var data = "data":["id":50,"name":"Alec","id":51,"name":"Recep","id":52,"name":"Aecep"];
$("#box").on("keyup", function()
$('#select_box').empty();
var search_text = $("#box").val().toLowerCase();
data_value = data.data[0].name.substring(search_text.length).toLowerCase();
for (var i=0; i<data.data.length; i++)
if(search_text === data.data[i].name.substring(0,search_text.length).toLowerCase())
$("#select_box").append(new Option(data.data[i].name, data.data[i].id));
);
</script>
</body>
</html>
此代码正在运行。为您的项目正确更改变量
【讨论】：
评论不用于扩展讨论；这个对话是moved to chat。以上是关于使用 select2 和 ajax laravel 资源进行多选的主要内容，如果未能解决你的问题，请参考以下文章
如何在 laravel 中使用 AJAX 数据时设置 Select2 的选定值？
当 Ajax 响应来自使用 select2 的 laravel 控制器时，如何检查 JQuery 附加选项中的条件？