Ajax 与 Laravel 形成集体
Ajax with Laravel Form Collective
{!! Form::select('jobsList[]', $list_of_jobs, null, ['id' => 'job', 'class' => 'form-control' 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}
我有这个表格,我正在尝试与我正在做的事情相比异步加载 $list_of_jobs。我对 LaravelCollective Form 的工作方式有点困惑。谁能指出我将如何通过它?我已经有 ajax 调用并从控制器
中获取 $list_of_jobs
//...
{!! Form::select('jobsList[]', [], null, ['id' => 'job', 'class' => 'form-control' 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}
..//
Populating your select box using JQUERY, AJAX
<script>
$(document).ready(function() {
//Make an Ajax request to a Laravel route
//This will return the data that we can add to our Select element.
$.ajax({
url: 'YOUR URL GOES HERE',
type: 'get',
success: function(data){
//Log the data to the console so that
//you can get a better view of what the script is returning.
console.log(data);
$.each(data, function(key, value){
//Use the Option() constructor to create a new HTMLOptionElement.
var option = new Option(key, value);
//Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
$(option).html(value);
//Append the option to our Select element.
$("#job").append(option);
});
}
});
});
</script>
data
must be an array of objects [{}, {}, {}]
[
{'key' : 'foo', 'value' => 'bar'},
{'key' : 'kosksi', 'value' => 'makrouna'},
{'key' : 'lablebi', 'value' => 'kafteji'}
]
更新
如果您想在填充 select 框时设置 selected option(s)
:
您需要在每个数据收集对象中 return 一个额外的属性 selected : true|false
[
{'key' : 'foo', 'value' : 'bar', 'selected' : false},
{'key' : 'kosksi', 'value' : 'makrouna', 'selected' : false},
{'key' : 'lablebi', 'value' : 'kafteji', 'selected' : true}
]
然后在success()
ajax函数回调
//...
$.each(data, function(key, elem){
//Use the Option() constructor to create a new HTMLOptionElement.
var option = new Option(elem.value, elem.key, false, elem.selected);
//Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
$(option).html(elem.value);
//Append the option to our Select element.
$("#job").append(option);
});
//...
{!! Form::select('jobsList[]', $list_of_jobs, null, ['id' => 'job', 'class' => 'form-control' 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}
我有这个表格,我正在尝试与我正在做的事情相比异步加载 $list_of_jobs。我对 LaravelCollective Form 的工作方式有点困惑。谁能指出我将如何通过它?我已经有 ajax 调用并从控制器
中获取 $list_of_jobs//...
{!! Form::select('jobsList[]', [], null, ['id' => 'job', 'class' => 'form-control' 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}
..//
Populating your select box using JQUERY, AJAX
<script>
$(document).ready(function() {
//Make an Ajax request to a Laravel route
//This will return the data that we can add to our Select element.
$.ajax({
url: 'YOUR URL GOES HERE',
type: 'get',
success: function(data){
//Log the data to the console so that
//you can get a better view of what the script is returning.
console.log(data);
$.each(data, function(key, value){
//Use the Option() constructor to create a new HTMLOptionElement.
var option = new Option(key, value);
//Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
$(option).html(value);
//Append the option to our Select element.
$("#job").append(option);
});
}
});
});
</script>
data
must be an array of objects[{}, {}, {}]
[
{'key' : 'foo', 'value' => 'bar'},
{'key' : 'kosksi', 'value' => 'makrouna'},
{'key' : 'lablebi', 'value' => 'kafteji'}
]
更新
如果您想在填充 select 框时设置 selected option(s)
:
您需要在每个数据收集对象中 return 一个额外的属性 selected : true|false
[
{'key' : 'foo', 'value' : 'bar', 'selected' : false},
{'key' : 'kosksi', 'value' : 'makrouna', 'selected' : false},
{'key' : 'lablebi', 'value' : 'kafteji', 'selected' : true}
]
然后在success()
ajax函数回调
//...
$.each(data, function(key, elem){
//Use the Option() constructor to create a new HTMLOptionElement.
var option = new Option(elem.value, elem.key, false, elem.selected);
//Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
$(option).html(elem.value);
//Append the option to our Select element.
$("#job").append(option);
});
//...