Load data to Form:select in Laravel using Ajax - ajax

Question

So I have this Form in Blade
{!! Form::select('jobslist[]', $jobs, null, ['id' => 'jobs', 'class' => 'form-control jobs mav-select', 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!`}
I am trying to load $jobs data using Ajax, so I rewrote the form as
{!! Form::select('jobslist[]', [], null, ['id' => 'jobs', 'class' => 'form-control jobs mav-select', 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}
And added onload script underneath
function loadData(card){
$.ajax({
type: 'POST',
url: '/loadJobs/',
data: {name: card, element: '{{$posting->id}}'},
dataType: 'json',
success: function (response) {
console.log(response);
$("#jobs").html('');
$("#jobs").html(response.options);
})
},
error: function(response){
console.log('Error: ', response["responseText"]);
}
});
}
Through console log I can verify that I am hitting the controller and obtaining data in the format
Object:
options:
27969: "2016-230 :: PL"
27974: "2016-231 :: ML"
27989: "2016-233 :: RF"
how should I pass it to the select box?

Answer 1

You can use append to add the items to select in the success function:
success: function(response){
...
$('#jobs').append('<option value='+response.id+'>' +response.name+ '</option>')
...
}
There you have it, just change 'id' and 'name' as necessary, I hope it helps.

Answer 2

//...
success:function(response){
var len = response.length;
$("#jobs").empty();
for( var i = 0; i<len; i++){
var id = response[i]['id'];
var name = response[i]['name'];
$("#jobs").append("<option value='"+id+"'>"+name+"</option>");
}
}
//...

Answer 3

success: function(data){
console.log('success');
console.log(data);
jobs = data;
$.each(data, function(key, target){
//Use the Option() constructor to create a new HTMLOptionElement.
var option = new Option(target.name, target.id);
//Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
$(option).html(target.name);
//Append the option to our Select element.
$("#jobs").append(option);
//$("#jobs").append("<option> An Option </option>");
});
/
},