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

Question

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

首先展示公司，与该特定公司相关的第二个职位空缺。

因此，当我选择公司时，我会在第二选择器中看到与之相关的职位空缺

以下是View

中的代码

<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>');
            });
        });
    });
});