Добавление данных из ajax в тег выбора HTML с помощью jquery
Как я могу добавить данные из API в тег select в html.
Это мой код javascript.
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);
Это мой код html.
<select id = "selectProjectName" class = "form-control show-tick selectpicker" title = "Choose project name">
</select>
Данные отображаются в консоли браузера, но не добавляются к тегу select, в то время как жестко заданные значения отображаются в теге select.
Используя шаблон АдминBSBMaterialDesign-master.
Вы можете проверить мой ответ ниже и проверить, похожи ли ваши данные на данные, которые я опубликовал. В противном случае опубликуйте здесь минимальный образец данных.
Или используйте data.data.length, как в моем ответе, вместо data.total.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Попробуйте .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");
Можете ли вы использовать console.info для переменной данных, чтобы убедиться, что мы действительно получаем данные? Спасибо
(3) [{…}, {…}, {…}] {projectId: "1", projectName: "voda", projectManager: "nande", resourceCount: "1", startDate: "2018-09-27 09 : 50: 52 ",…} 1: {projectId:" 2 ", projectName:" dialog ", projectManager:" kushi ", resourceCount:" 1 ", startDate:" 2018-09-27 09:50:49 ", …} 2: {projectId: "4", projectName: "Системная панель Omobio", projectManager: "kushari", resourceCount: "1", startDate: "2018-09-27 14:58:25",…} длина: 3 прото: массив (0)
Я обновил ответ, чтобы вместо data.data были данные [i]. Разве ответ от @RafaelGuglielmi не сработал - тот, у которого есть обновление selectpicker?
Только что попробовал - это с data [i]. Данные получены, и мы можем их просмотреть в console.info, но они не добавляются к тегу select.
@RafaelGuglielmi сказал, что вы используете библиотеку для реализации своего выбора, он упомянул, чтобы поместить $ (element) .selectpicker ("refresh"); Добавил в ответ.
Вместо использования конкатенации строк вы можете использовать стиль 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>Это работает, когда данные жестко закодированы в массиве «данных». Но он не работает с данными, полученными из API.
Привет, @MinulMindula, тогда проблема может быть в том, что структура данных будет другой. Можете ли вы опубликовать данные в том виде, в котором они были получены с сервера?
Похоже, вы используете selectpicker, поэтому после того, как вы измените что-либо в элементе select, вам нужно обновить его с помощью $ (". Selectpicker"). Selectpicker ("refresh");
Это в документации здесь.
Кроме того, нет ничего плохого в вашем методе добавления, если data.total возвращает его длину (в противном случае используйте .длина), но, как и в случае с FYI, вы можете использовать следующий синтаксис:
$('#select').append($('<option>', {value:1, text:'One'}));
Чтобы вам было проще и приятнее.
Ваше здоровье! :)
Используйте .length вместо .total Внутри цикла создайте каждый элемент option и добавьте их один за другим к элементу select:
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);
}
Все еще нет. Есть ли другой способ добавить данные json, полученные от API, в тег выбора html?
Я предполагаю, что ваши данные относятся к типу ключевого значения
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>
Можете ли вы создать рабочий пример и поделиться, чтобы все понимали, что происходит и почему это может происходить