DropdownList不删除以前的元素。 （jQuery）

Question

我在我的视图中有两个下拉列表

第一显示公司，第二个空缺与该特定公司有关。

所以，当我选择的公司，我在与它

这里第二选择空缺看到的是查看

<div class="right-grid-in-grid" style="width:100%;"> 
       <div style="margin-left:20px;width:50%; "> 
        @Html.DropDownList("Company", ViewBag.Companies as SelectList, "Компания", new { @class = "greeting" }) 
        @Html.ValidationMessageFor(model => model.VacancyId, "", new { @class = "text-danger" }) 
       </div> 
       <div style="margin-left:20px;width:100%"> 
        <select name="id" id="vacancy" style="width:55%" class="greeting" data-url="@Url.Action("Vacancies","Questions")" > 
         <option value="" disabled selected>Вакансия</option> 
        </select> 
       </div> 

      </div> 

代码，我填写第二选择与AJAX调用这样

<script> 
$(function() { 
     $("#Company").change(function (e) { 
      var $vacancy = $("#vacancy"); 
      var url = $vacancy.data("url") + '?companyId=' + $(this).val(); 
      $.getJSON(url, function (items) { 
       $.each(items, function (a, b) { 
        $vacancy.append('<option value="' + b.Value + '">' + b.Text + '</option>'); 
       }); 
      }); 
     }); 
    }); 
</script> 

我的问题在于：当我第一次选择公司时，我看到与它相关的所有空缺。但是当我选择另一家公司时，我会看到第一家公司的空缺和第二家公司的空缺。

我该如何解决这个问题？

Answer 1

您错过了在公司更换活动时清理空缺的下拉菜单。所以在脚本代码中添加$("#vacancy").empty();。

<script> 
$(function() { 
    $("#Company").change(function (e) { 

     $("#vacancy").empty(); 
     var $vacancy = $("#vacancy"); 
     var url = $vacancy.data("url") + '?companyId=' + $(this).val(); 
     $.getJSON(url, function (items) { 
      $.each(items, function (a, b) { 
       $vacancy.append('<option value="' + b.Value + '">' + b.Text + '</option>'); 
      }); 
     }); 
    }); 
});