Javascript 如何根据另一个下拉列表的第一个选择筛选下拉列表中的信息

我在过滤第二个下拉列表中的信息时遇到问题，该信息应取决于第一个下拉列表的第一个选择，我想知道如何过滤该信息

这是我的代码：

c#控制器：

 [HttpGet]
        public IActionResult SubTrails()
        {
            try
            {

                var n = _unitOfWork.SubTrails.GetAll().ToList();
                if (n == null)
                {
                    return NoContent();
                }



                return new ObjectResult(n);

            }
            catch (Exception ex)
            {
                _logger.LogError(ex.ToString());
                return StatusCode(StatusCodes.Status500InternalServerError, new { Message = "Internal Server Error" });

            }
        }

        [HttpGet]
        public IActionResult Levels()
        {
            try
            {
                var n = _unitOfWork.Levels.GetAll().ToList();
                if (n == null)
                {
                    return NoContent();
                }



                return new ObjectResult(n);

            }
            catch (Exception ex)
            {
                _logger.LogError(ex.ToString());
                return StatusCode(StatusCodes.Status500InternalServerError, new { Message = "Internal Server Error" });

            }
        }

        [HttpGet]
        public IActionResult Trails()
        {
            try
            {
                var n = _unitOfWork.Trails.GetAll().ToList();
                if (n == null)
                {
                    return NoContent();
                }



                return new ObjectResult(n);

            }
            catch (Exception ex)
            {
                _logger.LogError(ex.ToString());
                return StatusCode(StatusCodes.Status500InternalServerError, new { Message = "Internal Server Error" });

            }
        }

cshtml:

@model DefinityFirst.Mobile.Admin.Web.Services.Marvel.Contracts.ListTrailSubTrailLevelContract
@inject DefinityFirst.Mobile.Admin.Web.Services.Marvel.IMarvelServices DropDownDataHelper

@{
    ViewBag.Title = "Create";
}@if (!ViewData.ModelState.IsValid)
{
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Warning!</strong> @Html.ValidationMessage("Error")
    </div>
}
<h2>Create</h2>
<p>New TrailSubTRailLEvel</p>
@using (Html.BeginForm("TrailSubTrailLevel", "TrailSubTrailLevel", FormMethod.Post, new { id = "demoForm" }))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>Trail</h4>

        <div class="form-group">
            @Html.Label("", "Trail", new { @class = "control-label col-md-2" })
            <div class="col-md-10" id = "partialDiv">
                @*@Html.DropDownListFor(model => model.TrailContract.Responsable.Id, Model.ManagersList, "Select one", new { @class = "form-control" })*@
                @Html.DropDownListFor(model => model.TrailId, await DropDownDataHelper.GetTrailsDdl(), "Select one", new { @class = "form-control", onchange = "SelectedIndexChanged()" })

                @Html.ValidationMessageFor(model => model.TrailId, "", new { @class = "text-danger" })
            </div>
        </div>



            <div class="form-group">
                @Html.Label("", "SubTrail", new { @class = "control-label col-md-2", @name = "Subtrail", @id= "Subtrail" })
                <div class="col-md-10">
                    @*@Html.DropDownListFor(model => model.TrailContract.Responsable.Id, Model.ManagersList, "Select one", new { @class = "form-control" })*@
                    @Html.DropDownListFor(model => model.SubtrailId, await DropDownDataHelper.SubTrailDdl(), "Select one", new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.SubtrailId, "", new { @class = "text-danger" })
                </div>
            </div>

        <div class="form-group">
            @Html.Label("", "Level", new { @class = "control-label col-md-2", @name = "Level", @id = "Level" })
            <div class="col-md-10">
                @*@Html.DropDownListFor(model => model.TrailContract.Responsable.Id, Model.ManagersList, "Select one", new { @class = "form-control" })*@
                @Html.DropDownListFor(model => model.LevelId, await DropDownDataHelper.LevelsDdl(), "Select one", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.LevelId, "", new { @class = "text-danger" })
            </div>
        </div>





            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-success" />
                </div>
            </div>

</div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    <script type="text/javascript">

        $('#SubtrailId').hide();
        $('#LevelId').hide();
        $("#Subtrail").hide();
        $("#Level").hide();

        $('#TrailId').on('change', function () {
           // alert("este valor es de trail", this.value)
            if (this.value != 0) {
                $("#Subtrail").show();
                $('#SubtrailId').show();

               alert(this.value)

            } else {
                $('#SubtrailId').hide();
                $('#LevelId').hide();
                // alert("no es diferente ")
            } 
        })
        $('#SubtrailId').on('change', function () {
            //alert("este valor es de subtrail", this.value)
            if (this.value != 0) {

                $("#Level").show();
                $('#LevelId').show();
                //alert(this.value)

            } else {

                $('#LevelId').hide();
                // alert("no es diferente ")
            }
        })

        function SelectedIndexChanged() {
            //Form post  
            //alert("esta validacion jala", this.value)
            document.demoForm.submit();
        }

    </script>
}

@model DefinityFirst.Mobile.Admin.Web.Services.Marvel.Contracts.listTrailSubtrailEventContract
@注入DefinityFirst.Mobile.Admin.Web.Services.Marvel.IMarvelServices DropDownDataHelper
@{
ViewBag.Title=“创建”；
}@如果（！ViewData.ModelState.IsValid）
{
&时代；
警告！@Html.ValidationMessage（“错误”）
}
创造
新列车次列车层

@使用（Html.BeginForm（“TrailSubTrailLevel”，“TrailSubTrailLevel”，FormMethod.Post，new{id=“demoForm”}））
{
@Html.AntiForgeryToken（）
追踪
@Html.Label（“，”Trail“，new{@class=“control Label col-md-2”}）
@*@DropDownListFor（model=>model.TrailContract.Responsable.Id，model.ManagersList，“选择一个”，新建{@class=“form control”}）*@
@Html.DropDownListFor（model=>model.TrailId，wait-DropDownDataHelper.gettrailsdl（），“选择一个”，新建{@class=“form control”，onchange=“SelectedIndexChanged（）”}）
@Html.ValidationMessageFor（model=>model.TrailId，“，new{@class=“text danger”}）
@Html.Label（“，”SubTrail“，”新的{@class=“control Label col-md-2”，@name=“SubTrail”，@id=“SubTrail”}）
@*@DropDownListFor（model=>model.TrailContract.Responsable.Id，model.ManagersList，“选择一个”，新建{@class=“form control”}）*@
@Html.DropDownListFor（model=>model.SubtrailId，wait-DropDownDataHelper.SubTrailDdl（），“选择一个”，新建{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.SubtrailId，“，new{@class=“text danger”}）
@Html.Label（“，”Level“，新的{@class=“control Label col-md-2”，@name=“Level”，@id=“Level”}）
@*@DropDownListFor（model=>model.TrailContract.Responsable.Id，model.ManagersList，“选择一个”，新建{@class=“form control”}）*@
@Html.DropDownListFor（model=>model.LevelId，wait-DropDownDataHelper.levelsdl（），“选择一个”，新建{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.LevelId，“，new{@class=“text danger”}）
}
@ActionLink（“返回列表”、“索引”）
@节脚本{
$（'#SubtrailId'）.hide（）；
$（'#LevelId'）.hide（）；
$（“#Subtrail”）.hide（）；
$（“#Level”）.hide（）；
$（'#TrailId'）。on（'change'，function（）{
//警报（“este valor es de trail”，此值）
如果（this.value！=0）{
$（“#Subtrail”）.show（）；
$（'#SubtrailId'）.show（）；
警报（此.value）
}否则{
$（'#SubtrailId'）.hide（）；
$（'#LevelId'）.hide（）；
//警报（“无差异”）
} 
})
$（'#SubtrailId'）。on（'change'，function（）{
//警报（“este valor es de subtrail”，此.value）
如果（this.value！=0）{
$（“#Level”）.show（）；
$（'#LevelId'）.show（）；
//警报（此.value）
}否则{
$（'#LevelId'）.hide（）；
//警报（“无差异”）
}
})
函数SelectedIndexChanged（）{
//标杆
//警报（“esta validacion jala”，此值）
document.demoForm.submit（）；
}
}

---

但是，当我进入视图时，仅加载一次所有数据，并且当您更改下拉列表中的选项时，不会重新加载数据

我在项目中使用了不引人注目的ajax实现了级联下拉列表 此示例是服务器上填充的国家/地区列表（如果已选择国家/地区，则也会填充状态）。如果更改了国家/地区下拉列表选择，则状态列表下拉列表将由ajax更新

具有这些特性（为了简洁起见，有些特性被省略）

需要 这是我的习惯：

$（函数（）{
var$elems=$（'select[data cascade childof]'）；
如果（$elems）{
$elems.每个（功能（索引，ele）{
var$parent=$（'#'+$（ele.data（'cascade-childof'））；
var serviceUrl=$（ele.data（'cascade-serviceUrl'）；
var origVal=$（ele）.data（'cascade-orig-val'）；
var selectLabel=$（ele）.data（'cascade-select-label'）；
var disableOnEmptyParent=$（ele.data（'cascade-disableOnEmptyParent'）；
var emptyParentValue=$（ele.data（'cascade-parent-emptyvalue'）；
$parent.change（函数（）{
$.getJSON（serviceUrl+$parent.val（），函数（数据）{
变量项=''+选择标签+''；
$。每个（数据、功能（i、项）{
items+=“”+item.text+“”；
});
$（ele.html）（项目）；
如果（原始长度>0）{
var found=$（ele）.find（“选项[value=“+origVal+”]”）。长度>0；
如果（找到）{
美元（ele）.val（origVal）；
}
}
});
如果（禁用OnemptyParent）{
var emptyParent=（$parent.val（）==emptyParentValue）；
如果（空家长）{
$（ele）.prop（“禁用”，真）；
}
否则{
$（ele）.prop（“禁用”，false）；
}
}
});
});
public IList<SelectListItem> AvailableCountries { get; set; }
public string CompanyCountry { get; set; } = string.Empty;
public IList<SelectListItem> AvailableStates { get; set; }
[StringLength(200, ErrorMessage = "State/Region has a maximum length of 200 characters")]
public string CompanyRegion { get; set; } = string.Empty;

var model = new CompanyInfoViewModel();

model.CompanyRegion = selectedSite.CompanyRegion;
model.CompanyCountry = selectedSite.CompanyCountry;

model.AvailableCountries.Add(new SelectListItem { Text = sr["-Please select-"], Value = "" });
var countries = await geoDataManager.GetAllCountries();
var selectedCountryGuid = Guid.Empty;
foreach (var country in countries)
{
    if (country.ISOCode2 == model.CompanyCountry)
    {
        selectedCountryGuid = country.Id;
    }
    model.AvailableCountries.Add(new SelectListItem()
    {
        Text = country.Name,
        Value = country.ISOCode2.ToString()
    });
}

if (selectedCountryGuid != Guid.Empty)
{
    var states = await geoDataManager.GetGeoZonesByCountry(selectedCountryGuid);
    foreach (var state in states)
    {
        model.AvailableStates.Add(new SelectListItem()
        {
            Text = state.Name,
            Value = state.Code
        });
    }
}

$(function () {
    var $elems = $('select[data-cascade-childof]');
    if ($elems) {
        $elems.each(function (index, ele) {
            var $parent = $('#' + $(ele).data('cascade-childof'));
            var serviceUrl = $(ele).data('cascade-serviceurl');
            var origVal = $(ele).data('cascade-orig-val');
            var selectLabel = $(ele).data('cascade-select-label');
            var disableOnEmptyParent = $(ele).data('cascade-disableonemptyparent');
            var emptyParentValue = $(ele).data('cascade-parent-emptyvalue');
            $parent.change(function () {
                $.getJSON(serviceUrl + $parent.val(), function (data) {
                    var items = '<option>' + selectLabel + '</option>';
                    $.each(data, function (i, item) {
                        items += "<option value='" + item.value + "'>" + item.text + "</option>";
                    });
                    $(ele).html(items);
                    if (origVal.length > 0) {
                        var found = $(ele).find("option[value=" + origVal + "]").length > 0;
                        if (found) {
                            $(ele).val(origVal);
                        }
                    }
                });
                if (disableOnEmptyParent) {
                    var emptyParent = ($parent.val() === emptyParentValue);
                    if (emptyParent) {
                        $(ele).prop("disabled", true);
                    }
                    else {
                        $(ele).prop("disabled", false);
                    }
                }

            });
        });
    }
});

<div class="form-group">
    <label asp-for="CompanyCountry" class="col-md-2 control-label">@sr["Country"]</label>
    <div class="col-md-10">
        <select id="CompanyCountry" asp-for="CompanyCountry"
                asp-items="Model.AvailableCountries" class="form-control"></select>
        <span asp-validation-for="CompanyCountry" class="text-danger"></span>
    </div>
</div>
<div class="form-group">
    <label asp-for="CompanyRegion" class="col-md-2 control-label">@sr["State"]</label>
    <div class="col-md-10">
        <select id="CompanyRegion" class="form-control"
                asp-for="CompanyRegion"
                asp-items="Model.AvailableStates"
                data-cascade-childof="CompanyCountry"
                data-cascade-serviceurl='@Url.Content("~/CoreData/GetStatesJson/?countryCode=")'
                data-cascade-orig-val="@Model.CompanyRegion"
                data-cascade-select-label="-Please select-"></select>
        <span asp-validation-for="CompanyRegion" class="text-danger"></span>
    </div>
</div>

[HttpGet]
[AllowAnonymous]
public async Task<IActionResult> GetStatesJson(
   string countryCode)
{
    var country = await dataManager.FetchCountry(countryCode);
    List<IGeoZone> states;
    if (country != null)
    {
        states = await dataManager.GetGeoZonesByCountry(country.Id);
    }
    else
    {
        states = new List<IGeoZone>(); //empty list
    }

    var selecteList = new SelectList(states, "Code", "Name");

    return Json(selecteList);

}