重置下拉列表在更改招聘选项时选择

I have three selects that are dynamically populated after selecting an option from a select menu above it. If I select an option from the first select the second is populated as intended but if I change the option in the first, the options are appended to the preexisting options rather than the select being reset and then populated with the new data. I am sure that there is some sort of reload or reset method I can call when I want to flush the old data out of there before populating with the new data, I just can't find it.

Javascript

<script>
  $(function() {
    $("#service").change(function() {
      var service = $(this).val();
        $.ajax({
          type: "GET",
            url: "<?=Config::get('baseURL');?>getdata.php",
            data: { service: service },
            dataType: "json"
        }).done(function(reply) {
          console.log(reply);  
            $.each(reply, function(key, value) {   
                $('#category').append($('<option>', { value: value.value }).text(value.text)); 
            });
        });

    });
  });
  $(function () {
    $("#category").change(function() {
      var service = $("#service").val();
      var category = $(this).val();
      $.ajax({
          type: "GET",
          url: "<?=Config::get('baseURL');?>getdata.php",
          data: {
              service: service,
              category: category
          },
          dataType: "json"
      }).done(function (reply) {
          $.each(reply, function (key, value) {
              $("#subCategory").append($('<option>', {
                  value: value.value
              }).text(value.text));
          });
      });
    });
  })
</script>

This code works fine, but I how can I tweak it to flush the old data out of there if I change an option in preceding dropdown?

Mean't to post post this earlier. Figured it out shortly afterwards. It get the job done for me. It is probably not pretty at all.

  $(function() {
    $("#service").change(function() {
      var service = $(this).val();
        $.ajax({
          type: "GET",
            url: "<?=Config::get('baseURL');?>getdata.php",
            data: { service: service },
            dataType: "json"
        }).done(function(reply) {
          $("#category").find('option').remove();
          $('#category').append($('<option>').text("--Please Select a Category--"));


            $.each(reply, function(key, value) {   
                $('#category').append($('<option>', { value: value.value }).text(value.text)); 
            });
        });

    });

    $("#category").change(function() {
      var service = $("#service").val();
      var category = $(this).val();
      $.ajax({
          type: "GET",
          url: "<?=Config::get('baseURL');?>getdata.php",
          data: {
              service: service,
              category: category
          },
          dataType: "json"
      }).done(function (reply) {
        $("#subCategory").find('option').remove();

        if (reply.length > 1) {
          $('#subCategory').append($('<option>').text("--Please Select a Sub-Category --"));
          $.each(reply, function (key, value) {
            $("#subCategory").append($('<option>', {
                value: value.value
            }).text(value.text));
          });
        } else {
          var value = reply[0];
          $("#subCategory").append($('<option>', { value: value.value }).text(value.text));

        } 
      });
    });
  });