Populating the data from ajax response into an dropdown

Question

Hi I am new to jquery and ajax I had a dropdown where I will get the data from database using ajax but I am getting issue while populating that data into an dropdown here is the fiddle here I had taken the response in an variable and populated

//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>

Here the problem is I am getting the same data for every dropdown on click of add button but here in the firstdropdown I am getting two names and when I click add and check the first dropdown again I am getting the two names doubled i.e 4 options but I want to show only two options in every dropdown whenever I check

Please help me

Answer 1

You can simply use .last function in your getEmails - append function to make sure that you are not appending to the new option to every drop down as you have same classes .drop.

This will ensure you are not appending the option to all the dropdowns but only the last one.

Demo

//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>

Answer 2

Try to change this line:

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

To this line, which will ensure that only the last dropdown gets the options added to it:

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