jQuery HTML Select标签附加自身重复

Question

我有以下jquery脚本，应该将选项数据附加到html中的select标记中：

该函数运行良好，并且将数据附加到select标签，但是在函数运行时，它不会使用先前加载的信息清空select标签。 如何清空选择标签并重新添加新数据，并包括请选择选项标签？

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

希望这段代码对您有所帮助。

HTML：

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

</select>

您的功能进行了一些更改：

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

您的问题来自for循环中.append()的使用。 它将多次附加相同的选项。

完全生成options列表，然后使用html()设置选项。

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

尝试这个

   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

您的代码看起来不错，您正在调用empty ，您可以更快地做的唯一一件事就是将选项一次附加到DOM。

码：

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);
},

演示： http ： //jsfiddle.net/IrvinDominin/as2bcpz8/