Jquery HTML Select标签追加重复自身答案

【问题标题】：Jquery HTML Select tag append repeats itselfJquery HTML Select标签追加重复自身
【发布时间】：2016-01-22 22:59:43
【问题描述】：

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

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

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) {

    }
  });

}

【问题讨论】：

你可以在一个元素上调用 empty() 来移除所有子元素。
删除间隔并将其添加到您的成功中。 setTimeout(get_client_list,3000) - 在 Ajax 中使用间隔会产生意想不到的副作用。但是我不明白为什么用户只有 3 秒的时间来选择某些东西然后你会杀死它？

标签： javascript jquery html

【解决方案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
      }
   });
}

【讨论】：

【解决方案2】：

您的代码看起来不错，您正在调用 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/

【讨论】：

【解决方案3】：

您的问题源于在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);

【讨论】：

【解决方案4】：

试试这个

   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) {

                    }
                });

            }

【讨论】：