将ajax响应中的数据填充到下拉列表中

Question

嗨，我是jquery和ajax的新手。我有一个下拉列表，我将使用ajax从数据库中获取数据，但我在将数据填充到下拉列表时遇到了问题

//Store in array()
$(document).ready(function () {
addOne();
$('.drop').select2();

});
var uids = [];
//Select option function
$(document).on("change", ".drop", function() {
$('#seedoc').data().enabled = 1; //set data-enabled to true instead of disabled = false

//Find option selected
var data = $(this).find("option:selected").attr('data-id')
//Push selected data-id
uids.push(data)
//Enable button on selection
$('#seedoc').prop('disabled', false)
$('#seedoc').css('color', 'green');

})
$(document).on("click", "#seedoc", function(e) {
const count = $('.drop').length;
let sum = 0;
$('.drop').each(function(e, elem) {
sum += (parseInt($(elem).val()) > 0);
});
if (sum == count) addOne();
});
//Send
function send() {
console.log(uids)
}
//response
var res = {
"users": ["<p style='margin:0px;display:none;'data-id='755'>amilham</p>",
"<p style='margin:0px;display:none;'data-id='706'>a_sarabi</p>"
]
}

function getEmails() {
res.users.forEach(function(option) {
$('.drop').append('<option value="' + $(option).attr('data-id') + '"" data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
});
}
function addOne() {
$('#seedoc').css('color', 'gray');

$('#email-list-container').append("<div class='form-group' style='display:flex'><select class='drop form-control' name='option' id='option'> <option value='0' disabled selected>Select your option</option> </select><select class='form-control'  style='margin-left:1rem' name='cars' id='permissions'><option value='1'>edit</option><option value='2'>view only</option></select>");
getEmails();
}
getEmails();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type='text/css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.3.1/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.3.1/select2.min.css" type='text/css' rel='stylesheet' />
<div id="email-list-container" class=""></div>
<i class="fa fa-plus-square fa-2x" aria-hidden="true" id="seedoc" style="float: right; margin-right: 10px;" data-enabled="0"></i>

这里的问题是，我在点击添加按钮时，每个下拉列表都得到了相同的数据，但在第一个下拉列表中，我得到了两个名字，当我点击添加并再次检查第一个下拉菜单时，我得到两个名称增加了一倍，即4个选项，但每当我检查时，我想在每个下拉列表中只显示两个选项

请帮我

Answer 1

尝试更改此行：

$('.drop').append('<option value="' + $(option).attr('data-id') + '"" data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
});

到这一行，这将确保只有最后一个下拉列表才能添加选项：

$('.drop').last().append('<option value="' + $(option).attr('data-id') + '"" data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
});

Answer 2

您可以简单地在getEmails-append函数中使用.last函数，以确保您不会在每个下拉列表中添加新选项，因为您有相同的类.drop。

这将确保您不是将选项附加到所有dropdowns，而只是最后一个。

演示

//Store in array()
$(document).ready(function() {
addOne();
});
var uids = [];
//Select option function
$(document).on("change", ".drop", function() {
$('#seedoc').data().enabled = 1; //set data-enabled to true instead of disabled = false
//Find option selected
var data = $(this).find("option:selected").attr('data-id')
//Push selected data-id
uids.push(data)
//Enable button on selection
$('#seedoc').prop('disabled', false)
$('#seedoc').css('color', 'green');
})
$(document).on("click", "#seedoc", function(e) {
const count = $('.drop').length;
let sum = 0;
$('.drop').each(function(e, elem) {
sum += (parseInt($(elem).val()) > 0);
});
if (sum == count) addOne();
});
//Send
function send() {
console.log(uids)
}
//response
var res = {
"users": ["<p style='margin:0px;display:none;'data-id='755'>amilham</p>",
"<p style='margin:0px;display:none;'data-id='706'>a_sarabi</p>"
]
}

function getEmails() {
res.users.forEach(function(option) {
$('.drop').last().append('<option value="' + $(option).attr('data-id') + '"" data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
});
}
function addOne() {
$('#seedoc').css('color', 'gray');
$('#email-list-container').append("<div class='form-group' style='display:flex'><select class='drop form-control' name='option' id='option'> <option value='0' disabled selected>Select your option</option> </select><select class='form-control'  style='margin-left:1rem' name='cars' id='permissions'><option value='1'>edit</option><option value='2'>view only</option></select>");
getEmails();
}
getEmails();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type='text/css' rel='stylesheet' />
<div id="email-list-container" class=""></div>
<i class="fa fa-plus-square fa-2x" aria-hidden="true" id="seedoc" style="float: right; margin-right: 10px;" data-enabled="0"></i>