Presented here is my JavaScript code.
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);
}
Upon selecting an option from the initial Selection Box with ID itemid, the secondary Selection Box (with ID hotelid) should be displayed. Below is the function that manages the dropdown options. The hideRemove function is supposed to reveal the hidden div, but it seems to be malfunctioning.
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();
});
};