<script type="text/javascript" language="javascript">
$(document).ready(function () {
var table = "<table id='tblItemList'>" +
"<tr>" +
"<th style='width:20px;'> </th>" +
"<th style='width:100px;'><b>ItemId</b></th>" +
"<th style='width:100px;'><b>Item</b></th>" +
"<th style='width:100px;'><b>Quantity</b></th>" +
"</tr>";
$("#ddlItemID").dropdownchecklist({forceMultiple: true , onComplete: function (selector) {
var values = "";
for (i = 0; i < selector.options.length; i++) {
if (selector.options[i].selected && (selector.options[i].value != "")) {
if (values != "") values += ";";
values += selector.options[i].value;
var chkId = 'chkId' + i;
var itemId = 'itemId' + i;
var ItemName = 'ItemName' + i;
var qty = 'qty' + i;
var itemData = "<tr>" +
"<td><input type='checkbox' id='" + chkId + "' /></td>" +
"<td id='" + itemId + "' class='selectedItemId'>" + selector.options[i].value + "</td>" +
"<td id='" + ItemName + "' class='selectedItemName'>" + selector.options[i].text + "</td>" +
"<td id='" + qty + "' class='selectedItemQty'>" + 0 + "</td>" +
"</tr>";
table += itemData;
}
}
table += "</table>";
$("#trItemsList").show();
$("#trItemsList").html(table);
}
, onItemClick: function (checkbox, selector) {
var justChecked = checkbox.prop("checked");
var checkCount = (justChecked) ? 1 : -1;
for (i = 0; i < selector.options.length; i++) {
if (selector.options[i].selected) checkCount += 1;
}
if (checkCount > 3) {
alert("Limit is 3");
throw "Too many items were selected";
}
}
});
});
</script>
I have the above jQuery code that creates an a table listing items selected from a dropdownchecklist that supports multiple select.
After a user has selected items in the dropdownchecklist, on onComplete, a "mini" table is created just below the dropdownchecklist with the users selected items.
Currently, the created table is read-only but what i want to achieve is the user to proceed and update the created tables last column (Quantity) with a numeric value for each item (row) in the table.
For example, if i selected Item_one, Item_five & Item_twenty from the dropdownchecklist, a table of 3 rows will be created. In that table i will have values for Item_ID and Item_Name. Now i want to be able to edit that table and input Item_Quantity against each row, after which i will finally save to the database.
Does any one how i can modify the above code such that the table created has an editable third column (Quantity), that users can update?
Below is the html for the dropdownlist
<td>
@Html.DropDownList("ddlItemID", ViewBag.GatePassItemsList as SelectList, new { @multiple = "multiple" })
</td>
Ok there you go!!
Jus replace your last td
in itemData with below
'<td id="' + qty + '" class="selectedItemQty"><input type="text" placeholder="Enter quantity" id="txt_'+qty+'"></td>'
That's it.
Let me know if you face any issues!!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.