javascript - 根据从 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);
}

从第一个选择框 (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();
    });
};

Answer 1

这一行:

onclick='createUserJsObject.hideRemove();'

正确调用了 hideRemove() 但函数实际上只是附加了 event 因此这意味着您必须先单击 然后将选择中的选项更改为 hide () 或 show() 它，除此之外，您还需要像这样在 hideRemove() 中做一些小改动:

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

因为您正在修改 DOM，所以您需要将事件附加到添加到 body 上的新元素

在这种情况下，我更愿意在这一行之后调用 hideremove()

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

这部分我会删除，试一试:

onclick='createUserJsObject.hideRemove();'