Заполнение данных из ответа 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

Вы можете просто использовать функцию .last в своей функции getEmails - append, чтобы убедиться, что вы не добавляете новую опцию в каждый раскрывающийся список, поскольку у вас есть те же классы .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>