Скрыть / Показать Div ниже выберите в зависимости от параметров, взятых из базы данных SQL Server

Question

Вот мой JavaScript .

function appendItemforPurchaseOrder() {
    debugger

    var rowNumber = parseInt($(".itemmapContainer").attr("data-rownumber"));
    rowNumber = isNaN(rowNumber) ? 1 : rowNumber + 1;

    var addNewItemDetailHtml = "<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12 itemmapWrapper custom-paaddingnone form-group'\
                               id='itemmapWrapper" + rowNumber + "' data-rowNumber='" + rowNumber + "' >";

    addNewItemDetailHtml += "<div class='col-lg-10 col-md-10 col-sm-10 col-xs-10 custom-paaddingnone form-group'>\
                                <div class='col-lg-1 col-md-1 col-sm-1 col-xs-1 custom-paaddingnone text-center'>" + rowNumber + "\
                                </div>\
                                <div class='col-lg-11 col-md-11 col-sm-11 col-xs-11 custom-paaddingnone'>\
                                    <div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 custom-paaddingleft' onclick='createUserJsObject.hideRemove();'>\
                                        <select class='form-control' id = 'itemid"+ rowNumber + "' ></select></div>\
                                    **<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2 custom-paaddingleft' style='display: none'>\
                                        <select class='form-control' id = 'hotelid"+ rowNumber + "' ></select></div>\**
                                </div> </div>";

    addNewItemDetailHtml += "</div>";

    $(".itemmapContainer").attr("data-rownumber", rowNumber);
    $(".itemmapContainer").append(addNewItemDetailHtml);
    intialize_itemDropDown(rowNumber);
}

После Выберите опцию из 1-го поля выбора (id = itemid) , 2-е поле выбора (id = hotelid) должен показать. Далее показывают функцию, которую я использовал для выпадающего списка. hideRemove функция, используемая для отображения скрытого div. Но это не работает.

function intialize_itemDropDown(rowNumber) {
    $.ajax({
        type: "GET",
        url: "/Item/GetAllItems/",
        cache: false,
        success: function (data) {
            debugger
            var countryHTMLString = "<option value ='0'>Select Item</option>";
            if (data.isSucess) {
                $.each(data.data, function (index, item) {
                    countryHTMLString += "<option value ='" + item.itemid + "'>" + item.itemname + " , " + item.companyname + "</option>";
                });
            }
            $("#itemid" + rowNumber + "").html(countryHTMLString);
        }, error: function (err) {
            debugger
        }
    });
}

function hideRemove() {
    $("#itemid").change(function () {
        $("#hotelid").hide();
        $("#" + $(this).val()).show();
    });
};

Answer 1

Эта строка:

onclick='createUserJsObject.hideRemove();'

правильно вызывает hideRemove(), но функция на самом деле просто присоединяет event, так что это означает, что вы должны сначала щелкнуть, а затем изменить опцию в select на hide() илиshow() это, кроме того, что вам нужно небольшое изменение в вашем hideRemove(), например:

function hideRemove() {
       $('body').on('change',
            '#itemid',
            function() {
               $("#hotelid").hide();
               $("#" + $(this).val()).show();
            });
}

, потому что вы изменяете DOM, вам нужно прикрепить свои события к новым элементам, добавленным в body

В этом случае я бы предпочел позвонить hideremove() после этой строки

 $(".itemmapContainer").append(addNewItemDetailHtml);

, а эту часть, которую я бы удалил, попробовать:

onclick='createUserJsObject.hideRemove();'