如何使用選項 jQuery 隱藏 select2

Question

我有帶有選項的 select 表單，用於按關鍵字搜索。 我正在使用select2 lib 。 但是我的select 表單是動態創建的，我想根據用戶的選擇隱藏和顯示一些 select 表單。 現在的問題是，如果我從列表中選擇一些東西：

對於前生產工廠，它將出現新的select 表格，我可以在其中選擇。 （效果很好）

如果我再次 go 到生產資源並選擇另一種類型：

現在我選擇了Production 段，prev select 表格是隱藏的，但是如果我想 go 回到Production 工廠，它不會出現：

我的代碼：

$("#productionResources").change(function () {
    var prodRes = $("#productionResources :selected").html();
   $("#selectedProdRes").html(prodRes);
    var id = $(this).val();
    if (id != "") {
        $('#' + id).select2().next().show();
    } 
    idChanging(id);

});

function idChanging(id) {
    $("#productionResources").change(function () {
        $('#' + id).select2().next().hide();
    });
}

HTML：

<div class="display-in-row">
        <label>Production resources</label><br>
        <select class="form-control" id="productionResources">
            <option selected></option>
            <option value="productionPlant">Production plant</option>
            <option value="productionSegment">Production segment</option>
            <option value="valueStream">Value stream</option>
            <option value="workCenterGroup">Work center group</option>
            <option value="workCenter">Work center</option>
            <option value="station">Station"</option>
        </select>
    </div>
    <div class="display-in-row">
        <div class="col-12">
            <label id="selectedProdRes"></label><br>
            <select asp-for="ProductionPlantId" asp-items="Model.ProductionPlant" class="form-control content" id="productionPlant"></select>
            <select asp-for="ProductionSegmentId" asp-items="Model.ProductionSegment" class="form-control content" id="productionSegment"></select>
            <select asp-for="ValueStreamId" asp-items="Model.ValueStream" class="form-control content" id="valueStream"></select>
            <select asp-for="WorkCenterGroupId" asp-items="Model.WorkCenterGroup" class="form-control content" id="workCenterGroup"></select>
            <select asp-for="WorkCenterId" asp-items="Model.WorkCenter" class="form-control content" id="workCenter"></select>
            <select asp-for="StationId" asp-items="Model.Station" class="form-control content" id="station"></select>
        </div>
    </div>

Answer 1

問題來自您的 function idChanging() ：

一旦您更改第一個 select， idChanging()事件就會設置並保留。 所以每次你 select #productionResources時， idChanging()定義的所有事件都會被觸發，所以之前選擇的所有選擇都將被隱藏。

以下應該有效：

我在所有輔助選擇中添加了一個 class secondary-select選擇以方便，但這不是必需的：

<div class="display-in-row">
        <div class="col-12">
            <label id="selectedProdRes"></label><br>
            <select asp-for="ProductionPlantId" asp-items="Model.ProductionPlant" class="form-control content secondary-select" id="productionPlant"></select>
            <select asp-for="ProductionSegmentId" asp-items="Model.ProductionSegment" class="form-control content secondary-select" id="productionSegment"></select>
            <select asp-for="ValueStreamId" asp-items="Model.ValueStream" class="form-control content secondary-select" id="valueStream"></select>
            <select asp-for="WorkCenterGroupId" asp-items="Model.WorkCenterGroup" class="form-control content secondary-select" id="workCenterGroup"></select>
            <select asp-for="WorkCenterId" asp-items="Model.WorkCenter" class="form-control content secondary-select" id="workCenter"></select>
            <select asp-for="StationId" asp-items="Model.Station" class="form-control content secondary-select" id="station"></select>
        </div>
    </div>

$("#productionResources").change(function () {
    // Define title
    var prodRes = $("#productionResources :selected").html();
    $("#selectedProdRes").html(prodRes);
    // Make sure none of the 2nd select is visible
    $('.secondary-select').select2().next().hide();
    // Display the select according to the ID
    var id = $(this).val();
    if (id !== '') {
        $('#' + id).select2().next().show();
    } 
});