gpt4 book ai didi

Javascript将列表填充到html中选择重复列表两次

转载 作者:行者123 更新时间:2023-12-03 05:58:27 25 4
gpt4 key购买 nike

我正在使用 jquery ajax 来填充 html 选择。填充实际上是有效的,但问题是由于某种原因整个列表被添加了两次而不是一次。

这是代码:

myfunction: function() {  
$.ajax({
url: 'the-url-here',
method: 'GET',
success: function(result) {
$.each(result.cars, function(result, value) {
if (value.active === '1'){
$('#myselect').append($('<option>').text(value.name).attr('value', value.id));
}
});
}
});
}

如何解决此问题,使其仅填充一次而不是两次?

最佳答案

不要在循环中选择元素(当列表很大时会导致性能问题),而是在循环外选择它,然后创建 <options> 列表在循环外部,附加到 <select> .

(function($){$(function(){
var carsDataFetchViaAjax = [
{id: 1, active: 1, name: 'Car1'},
{id: 2, active: 1, name: 'Car2'},
{id: 3, active: 0, name: 'Car3'}
]

var $select = $('#select'),
options = [];

carsDataFetchViaAjax.map(function(car, i){
if (car.active == 1){
options.push($('<option>').val(car.id).html(car.name))
}
})

$select.append(options);

})})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="select"></select>

<小时/>

关于Javascript将列表填充到html中选择重复列表两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39833875/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com