Question

我有一个SELECT对象，我用AJAX（JQUERY）填充它。

$("#setor").change(function(){
    $("#loading").css("display", "inline-block");
    $.ajax({
        type: "POST",
        url: "<?php echo base_url();?>quadracontroller/lista_quadras/"+$("#setor").val(),
        success: function(html) {
            $("#quadra").append(html);
            $("#loading").css("display", "none");
        }
    });
});

HTML

<select name="quadra" id="quadra">
                                    <option value="0" selected="selected">--</option>
                                </select>

问题在于，每个请求都会增加select的选项。

如何清除上一次请求中生成的内容？

提前致谢并抱歉我的英语不好=）

Answer 1

   $("#quadra").empty();
   $("#quadra").append(html);

Answer 2

试试这个

 $("#quadra").html(html);

Answer 3

$('#quadra').find('option').remove();

Here是演示的小提琴。

Answer 4

我会在页面加载（1）上保存初始状态，然后在执行.append()之前将其恢复。像这样：

// save the initial HTML
$('#quadra').data('initial-options', $('#quadra').innerHTML);

$("#setor").change(function(){
  $("#loading").css("display", "inline-block");
  $.ajax({
    type: "POST",
    url: "<?php echo base_url();?>quadracontroller/lista_quadras/"+$("#setor").val(),
    success: function(html) {
      var quadra = $("#quadra");

      // restore the initial HTML
      quadra.innerHTML = $('#quadra').data('initial-options');
      quadra.append(html);

      $("#loading").css("display", "none");
    }
  });
});

JQuery - Clean选择新请求的选项

4 个答案: