Jquery HTML Select tag append repeats itself

Question

I have the following jquery script which is supposed to append option data to a select tag in html :

The function works very well and it appends data to the select tag but it does not empty the select tag with the previous loaded information when the function runs. How can I empty the select tag and append new data afresh and also include the please select option tag ?

setInterval(function() {
  get_client_list();
}, 3000);

function get_client_list() {
  client_list = '';
  $.ajax({
    type: "GET",
    url: "<?php echo base_url(); ?>operations/get_client_lists",
    dataType: "JSON",
    success: function(response) {
      $('#select_client_name').empty();
      client_list = '<option>Please select : </option>';
      for (i = 0; i < response.length; i++) {
        client_list += '<option value="' + response[i].id + '">' + response[i].name + '</option>';
        $('#select_client_name').append(client_list);
      }


    },
    error: function(response) {

    }
  });

}

Answer 1

Hope this code will help you..

HTML:

<select name="" id="select_client_name">

</select>

Your function with some changes:

function get_client_list() 
{
      client_list = '';
      $.ajax({
      type: "GET",
      url: "<?php echo base_url(); ?>operations/get_client_lists",
      dataType: "JSON",
      success: function(response) 
      {
          client_list +='<option value="">Please select : </option>';
          $('#select_client_name').prop('selectedIndex',0);
          for (i = 0; i < response.length; i++) 
          {
              client_list += '<option value="' + response[i].id + '">' + response[i].name + '</option>';
          }
          $('#select_client_name').html(client_list);
      },
      error: function(response) 
      {
         // code here
      }
   });
}

Answer 2

Your problem arise from the usage of .append() within the for loop. It will append same options multiple times.

Generate options list completely then use html() to set options.

//Generate client_list 
var client_list = '<option>Please select : </option>';
for (i = 0; i < response.length; i++) {
    client_list += '<option value="' + response[i].id + '">' + response[i].name + '</option>';
}

//Set select with new generated options
$('#select_client_name').html(client_list);

Answer 3

Try this

   setInterval(function () {
                get_client_list();
            }, 3000);

            function get_client_list() {
                client_list = '';
                $.ajax({
                    type: "GET",
                    url: "<?php echo base_url(); ?>operations/get_client_lists",
                    dataType: "JSON",
                    success: function (response) {
                   $('#select_client_name').html('');//this much change is needed
                        $('#select_client_name').empty();
                        client_list = '<option>Please select : </option>';
                        for (i = 0; i < response.length; i++) {
                            client_list += '<option value="' + response[i].id +        '">' + response[i].name + '</option>';
                            $('#select_client_name').append(client_list);
                        }


                    },
                    error: function (response) {

                    }
                });

            }

Answer 4

You code looks fine, you are calling empty , the only thing you can do faster is to append the options one time to the DOM.

Code:

success: function (response) {
    $('#select_client_name').empty();
    var client_list = '<option>Please select : </option>';
    for (i = 0; i < response.length; i++) {
        client_list += '<option value="' + response[i].id + '">' + response[i].name + '</option>';
    }
    $('#select_client_name').append(client_list);
},

Demo: http://jsfiddle.net/IrvinDominin/as2bcpz8/