In my web application, I'm adding new rows to the table from JavaScript.
There is a select element in the row and for the options I am loading data from the ViewBag.
Also, I want to add Select2 class to the same select element.
So I tried doing
'<select onchange="sendInfo(this)" class="form-select Select2 ItemId" data-id= '+counter+' name="Item_Id[' +
counter +']" id="ItemId[' + counter +']" required="required" ' + "</select>"
But it doesn't apply to the class correctly.
I want help from you to fix this issue.
Here is my full code.
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.6.4.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div class="table-responsive text-nowrap">
<table class="table table-striped" id="submissionTable">
<thead>
<tr>
<th>#</th>
<th>ITEM</th>
<th>QTY</th>
<th>MEASURE BY</th>
<th>UNIT PRICE</th>
<th>LINE TOTAL</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr id="tablerow0"></tr>
</tbody>
</table>
<p>
<button id="add" type="button" class="btn btn-primary">Add</button>
</p>
</div>
JavaScript
var counter = 1;
var dropdownOptions = @Html.Raw(Json.Encode(ViewBag.Item_ID));
$(function () {
$("#add").click(function () {
var newRow = $(
'<tr id="tablerow' +
counter +
'" class ="poSet"> ' +
"<td>" +
'<label id="CountItems"><strong>' +
counter +
"</strong></label>" +
"</td>" +
'<td width="40%">' +
'<select onchange="sendInfo(this)" class="form-select ItemId" data-id= ' + counter + ' name="Item_Id[' +
counter +
']" id="ItemId[' + counter + ']" required="required" ' +
"</select>" +
"</td>" +
'<td width="10%">' +
'<input type="text" class="form-control Qty" name="Qty[' +
counter +
']" value="1" id="Qty[' + counter + ']" onchange="calQtyBase(this)" data-QtyId= ' + counter + ' required="required" />' +
"</td>" +
'<td width="10%">' +
'<input type="text" class="form-control" name="MeasureBy[' +
counter +
']" value="" id="MeasureBy[' + counter + ']" readonly />' +
"</td>" +
'<td width="20%">' +
'<input type="text" class="form-control UnitPrice" name="Unit_Price[' +
counter +
']" value="0.00" id="UnitPrice[' + counter + ']" onchange="priceBase(this)" data-PriceId= ' + counter + ' required="required" />' +
"</td>" +
'<td width="20%">' +
'<input type="text" class="form-control LineTotal" name="Line_Total[' +
counter +
']" value="0.00" id="LineTotal[' + counter + ']" required="required" />' +
"</td>" +
"<td>" +
'<button type="button" class="btn btn-danger" onclick="removeTr(' +
counter +
');">x</button>' +
"</td>" +
"</tr>"
);
var selectElement = newRow.find("select"); // Find the <select> element in the new row
// Populate the <select> element with options
dropdownOptions.forEach(function (option) {
var optionElement = $("<option>").val(option.Value).text(option.Text);
selectElement.append(optionElement);
optionElement.select2();
});
newRow.appendTo("#submissionTable");
counter++;
return false;
});
});
