JQuery - Clean Select опций по новому запросу

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>

Дело в том, что для каждого запроса он увеличиваетварианты на выбор.

Как мне сделать, чтобы очистить сгенерированный по предыдущему запросу?

Заранее спасибо и извините за мой плохой английский =)

Answer 1

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

Answer 2

Я бы сохранил начальное состояние при загрузке страницы (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");
    }
  });
});

Answer 3

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

Здесь скрипка для демонстрации.

Answer 4

Попробуйте это

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