Ini JavaScript saya.

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);
}

Setelah Pilih opsi dari Kotak Pilihan 1 (id=itemid) , Kotak Pilihan ke-2 (id=hotelid) akan ditampilkan. Berikut ini menunjukkan fungsi yang saya gunakan untuk drop down. Fungsi hideRemove digunakan untuk menampilkan div tersembunyi. Tapi itu tidak bekerja.

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

0
DinupaChamin 25 Oktober 2019, 14:04

1 menjawab

Jawaban Terbaik

Garis ini:

onclick='createUserJsObject.hideRemove();'

Benar memanggil hideRemove() tetapi fungsi sebenarnya hanya melampirkan event jadi itu berarti Anda harus mengklik terlebih dahulu kemudian mengubah opsi di pilih menjadi hide() atau show(), selain itu Anda memerlukan beberapa perubahan kecil di hideRemove() Anda seperti ini:

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

Karena Anda memodifikasi DOM Anda perlu melampirkan acara Anda ke elemen baru yang ditambahkan di body

Dalam hal ini saya lebih suka memanggil hideremove() setelah baris ini

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

Dan bagian ini akan saya hapus, cobalah:

onclick='createUserJsObject.hideRemove();'
0
marc_s 10 November 2019, 10:05