Question

如何将 API 中的数据附加到html中的选择标记。

这是我的 javascript 代码。

class Person extends Entity implements EntityNameableSelectable<Person> {}

这是我的 html 代码。

 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);

数据显示在浏览器的控制台中，但是当选择标记中显示硬编码值时，数据不会附加到选择标记中。

使用 AdminBSBMaterialDesign-master 模板。

Answer 1

您似乎正在使用selectpicker，因此在select元素中进行任何更改后，都需要使用$（“。selectpicker”）。selectpicker（“ refresh”）;

对其进行刷新。

这在文档here中。

此外，只要data.total返回其长度（否则，请使用 .length ），添加它的方法就没有任何问题，但是就像供您参考，以下语法：

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

使事情变得更轻松，更好。

干杯！：）

Answer 2

我认为您的数据是键值类型

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

尝试使用.length 而不是.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

您可以使用jquery样式创建option元素并附加如下内容，而不是使用字符串连接。

请根据您尝试使用的代码，检查您的数据结构是否与下面的数据结构相似。

否则最好使用data.data.length而不是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

使用.length代替.total 在循环内部，创建每个选项元素，并将它们一个一个地添加到选择元素中：

    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);
    }

使用jQuery将数据从Ajax追加到HTML选择标签

5 个答案: