使用 jquery 将数据从 ajax 附加到 html select 标签

Question

How can I append the data from API to a select tag in html.

This is my javascript code.

 var options = '';
 for (var i = 0; i < data.total; i++) {
      options += '<option value="' + data.data[i].projectName + '">' + data.data[i].projectName + '</option>';
}
$("#selectProjectName").append(options);

This is my html code.

<select id="selectProjectName" class="form-control show-tick selectpicker" title="Choose project name">

</select>

The data is shown in the console of the browser, but it is not appended to the select tag while hard coded values are shown in the select tag.

Using AdminBSBMaterialDesign-master template.

Answer 1

It looks that you're using selectpicker, so after you change anything in the select element you need to refresh it using $(".selectpicker").selectpicker("refresh");

This is in the documentation here .

Also, there's nothing apparently wrong with your method of appending it, as long as data.total returns the length of it (otherwise, use .length ) but just as a FYI you can use the following syntax:

$('#select').append($('<option>', {value:1, text:'One'}));

To make things easier and nicer for you.

Cheers! :)

Answer 2

I assume your data is key value type

 var newOptions = { 'red' : 'Red', 'blue' : 'Blue', 'green' : 'Green', 'yellow' : 'Yellow' }; // get this data from server var selectedOption = 'green'; var select = $('#selectProjectName'); var options = select.prop('options'); $.each(newOptions, function(val, text) { options[options.length] = new Option(text, val); }); select.val(selectedOption); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectProjectName" class="form-control show-tick selectpicker" title="Choose project name"> </select> 

Answer 3

Try .length instead of .total

var options = '';

for (var i = 0; i < data.length; i++) {
 options += '<option value="' + data[i].projectName + '">' + data[i].projectName + '</option>';
}

$("#selectProjectName").append(options);
$("#selectProjectName").selectpicker("refresh");

Answer 4

Instead of using string concatenation, you can use jquery style of creating option element and appending the same as below.

Please check whether your data structure is similar to the one below according to the code that you are trying.

Otherwise better to use data.data.length instead of data.total

 var data = { total: 3, data: [ { projectName: 'jquery' }, { projectName: 'reactjs' }, { projectName: 'angular' } ] }; for (var i = 0; i < data.data.length; i++) { var option = $('<option>', { value: data.data[i].projectName, html: data.data[i].projectName }); $("#selectProjectName").append(option); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectProjectName" class="form-control show-tick selectpicker" title="Choose project name"> </select> 

Answer 5

Use .length instead of .total Inside the loop, create each option element and add them one by one to the select element:

    for (var i = 0; i < data.length; i++) {
        var opt = $('<option></option>');
        opt.attr('value', data.data[i].projectName).text(data.data[i].projectName);
        $("#selectProjectName").append(opt);
    }

Answer 6

I found I was missing...

<script   src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

after I added it fixed the problem.