Question

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

该函数非常有效，它将数据附加到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

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

完全生成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/

Jquery HTML选择标记append重复自身

4 个答案: