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

Question 1

Вот мой 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);
}

После выбора параметра в первом поле выбора (id = itemid) должно появиться второе поле выбора (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();
    });
};

javascript html css asp.net-mvc visual-studio-2017

0

DinupaChamin 25 Окт 2019 в 14:04

Answer

Эта строка:

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();'

0

marc_s 10 Ноя 2019 в 13:05

Это помогло?

–

DevFlamur

30 Окт 2019 в 18:12

Извините за поздний ответ.. Да, это действительно работает.. Большое вам спасибо.. @DevFlamur

–

DinupaChamin

4 Ноя 2019 в 15:06

Question 2