Javascript&；情态动词它赢了'；不要一次就触发

我有一个带有按钮的索引页，该按钮调用称为_Create的局部视图，显示为模式视图

在Index视图中，我有一个JScript，它填充了modal上的dropdownlist。代码如下：

@section scripts{
<script src="~/js/store-index.js" asp-append-version="true"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#modal-action-store').on('shown.bs.modal', function (e) {
            var test = "#StoreArea";
            if ($(test).val()) {

            } else {
                var items = "<option value='0'>Select</option>";
                $('#DistrictID').html(items);
            }
        });
    });
</script>

<script type="text/javascript">
    $('#modal-action-store').on('shown.bs.modal', function (e) {
        $('#DepartmentID').change(function () {
            var url = '@Url.Content("~/")' + "Stores/GetDistrict";
            var ddlsource = "#DepartmentID";
            $.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
                var items = '';
                $("#DistrictID").empty();
                $.each(data, function (i, district) {
                    items += "<option value='" + district.value + "'>" + district.text + "</option>";
                });
                $('#DistrictID').html(items);
            });
        });
    });
</script>

@节脚本{
$（文档）.ready（函数（）{
$（“#模态动作存储”）.on（'show.bs.modal'，函数（e）{
var test=“#StoreArea”；
if（$（test）.val（））{
}否则{
var items=“选择”；
$（'#DistrictID'）.html（项目）；
}
});
});
$（“#模态动作存储”）.on（'show.bs.modal'，函数（e）{
$（'#部门ID'）。更改（函数（）{
var url='@url.Content（“~/”）+“Stores/GetDistrict”；
var ddlsource=“#部门ID”；
$.getJSON（url，{DepartmentID:$（ddlsource）.val（）}，函数（数据）{
var项目=“”；
$（“#DistrictID”）.empty（）；
$。每个（数据、功能（i、地区）{
项目+=“”+district.text+“”；
});
$（'#DistrictID'）.html（项目）；
});
});
});

}

问题：问题是我第一次打开modal时，JS不会启动。我需要关闭模式并再次打开它，以触发那些JScript，我不知道为什么。我认为使用“show.bs.modal”就足以在模态弹出时触发它们

有人能给我一些反馈吗

提前谢谢

更新

这是已声明模式的索引页：

@model IEnumerable<Application.Models.Store>
@using Application.Models
@{
ViewData["Title"] = "Index";
}

<h2>Stores</h2>

<div class="top-buffer"></div>
<div class="panel panel-primary">
<div class="panel-heading panel-head">Stores</div>
<div class="panel-body">
    <div class="btn-group">
        <a id="createEditStoreModal" data-toggle="modal" asp-action="Create" data-target="#modal-action-store"
           class="btn btn-primary">
                <i class="glyphicon glyphicon-plus"></i>  Add Store
            </a>
    </div>
    <div class="top-buffer"></div>
</div>

@model IEnumerable
@使用Application.Models
@{
ViewData[“标题”]=“索引”；
}
商店
商店
添加存储

这是PartialView\u创建（模式）视图：

@model Application.Models.ApplicationviewModels.StoreIndexData
@使用Application.Models
地区
@等待Html.partialsync（“_ModalFooter”，new ModalFooter{}）

---

希望这有帮助

请显示初始化和显示模式的代码。@BennyJohansson已添加更新！使用

$（“#modal action store”）

验证每一行在脚本第一次执行时是否与元素匹配。如何验证？它第一次执行时是否与元素匹配？抱歉，我对JS非常陌生）：我强烈建议您投入时间学习这些调试技术：以及。两者都可用于验证元素在执行时是否存在。

@model Application.Models.ApplicationviewModels.StoreIndexData
@using Application.Models


<form asp-action="Create" role="form">

<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="modal-body form-horizontal">
    <div class="form-group">
        <label asp-for="DepartmentID" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <select asp-for="DepartmentID" class="form-control"
                    asp-items="@(new SelectList(@ViewBag.ListofDepartment,"DepartmentID","DepartmentName"))"></select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">District</label>
        <div class="col-md-10">
            <select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID"
                    asp-items="@(new SelectList(@ViewBag.ListofDistrict,"DistrictID","DistrictName"))"></select>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="StoreChainID" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <select asp-for="StoreChainID" class="form-control" asp-items="ViewBag.ChainList"></select>
            <span asp-validation-for="StoreChainID" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="StoreName" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="StoreName" class="form-control" />
            <span asp-validation-for="StoreName" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="StoreAddress" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="StoreAddress" class="form-control" />
            <span asp-validation-for="StoreAddress" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="StoreArea" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="StoreArea" class="form-control" />
            <span asp-validation-for="StoreArea" class="text-danger"></span>
        </div>
    </div>
    @await Html.PartialAsync("_ModalFooter", new ModalFooter { })
</div>