Ajax with Laravel Form Collective - laravel

Question

{!! Form::select('jobsList[]', $list_of_jobs, null, ['id' => 'job', 'class' => 'form-control' 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}
I have this form and I am trying to load $list_of_jobs asynchronously compared to what I am doing. I am kind of confused with the way LaravelCollective Form works. Can anyone point out how I would pass that? I already have ajax call that goes and grabs the $list_of_jobs from the controller

Answer 1

//...
{!! 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'}
]
Update
If you want to set selected option(s) when Populating your select box :
You need to return an extra attribute selected : true|false in each object of data collection
[
{'key' : 'foo', 'value' : 'bar', 'selected' : false},
{'key' : 'kosksi', 'value' : 'makrouna', 'selected' : false},
{'key' : 'lablebi', 'value' : 'kafteji', 'selected' : true}
]
Then in success() ajax function callback
//...
$.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);
});
//...