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

我有三个选择，在从上面的选择菜单中选择一个选项后，会动态填充。如果我从第一个选择中选择了一个选项，则第二个选项将按预期填充，但如果我在第一个选择中更改了该选项，则这些选项将附加到先前存在的选项中，而不是重置选择，然后用新数据填充。我确信，当我想刷新旧数据时，可以调用某种重载或重置方法 在填充新数据之前，我就是找不到它

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>

---

这段代码运行得很好，但是如果我在前面的下拉列表中更改了一个选项，我如何调整它以清除其中的旧数据呢？

意思是不要在前面发布这段代码。很快就明白了。它能帮我完成工作。它可能一点也不漂亮

  $(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));

        } 
      });
    });
  });

如果子类别的内容完全由您的代码生成，那么您应该做的第一件事就是将其中的内容清空。否则，您将继续。追加更多数据。如果某些子类别是静态的，这显然不起作用。但这应该让你开始。