jQuery的HTML选择标签追加重演

我有这应该选项的数据追加到选择标记HTML中的下列jQuery脚本：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) { 

    } 
    }); 

}

来源

2015-10-23 H Dindi

你可以在元素上调用empty（）来删除所有的子元素。 – Taplar

删除间隔并将其添加到您的成功。 'setTimeout（get_client_list，3000）' - 在Ajax中使用区间具有意想不到的副作用。但我不明白为什么用户只有3秒钟选择一些东西，然后你会杀了它？ – mplungjan

试试这个

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

        } 
       }); 

      }

来源

2015-10-23 12:05:51 Maheshvirus

您的问题从.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);

来源

2015-10-23 12:06:09 Satpal

你的代码看起来不错，你在呼唤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/

来源

2015-10-23 12:13:30

希望这个代码将会帮助你..

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

来源

2015-10-23 12:40:43

jQuery的HTML选择标签追加重演

回答

相关问题