javascript - 在另一个下拉列表中选择特定选项时删除 DropDownListFor 选择

Question

我显然在理解 JS 方面遇到了问题。我是新手，我正在尝试让它适用于以下用例:

If "Healthcare" is selected from the "discipline" dropdown then the option "Private Sector" will not be visible in the other dropdown.

<div class="col-md-6 jurisdictionParentDiv">
    <div class="form-group">
        @Html.LabelFor(m => m.Jurisdiction, new { @class ="control-label" })
        @Html.DropDownListFor(
            m => m.Jurisdiction,
            GlobalLists.JurisdictionList
                .Where(k => k.Key != "Military")
                .Select(
                    k => new SelectListItem {
                        Text = k.Value,
                        Value = k.Key,
                        Selected = k.Value == Model.Jurisdiction
                    }),
            "-- Select --",
            new { @class = "form-control input-sm" }
        )
    </div>
</div> 

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            @Html.LabelFor(m => m.Discipline, new { @class = "control-label" })
            @Html.DropDownListFor(
                m => m.Discipline,
                GlobalLists.DisciplineList
                    .Select(
                        k => new SelectListItem {
                            Text = k.Value,
                            Value = k.Key,
                            Selected = k.Value == Model.Discipline
                        }),
                "-- Select --",
                new { @class = "form-control input-sm" }
            )
    </div>
</div>

<script>
    $(document).ready(function() {
        $('#Jurisdiction').change(function () {
            var el = $('#Discipline');
            if (el.val() === 'Healthcare') {
                $('#Jurisdiction').remove('Private Sector')
            }
        });
    });
</script>

Answer 1

你可以简单地做，

if ($('#Discipline').val() === "Healthcare") {
    $("#Jurisdiction option[value='Private Sector']").hide();
}