Hello everyone, I have this requirement that I need a dropdown list that allows multiple selection as well as a textbox to enter quantity for each check. In a way it's checkboxlist with a textbox next to each checkbox. The textbox is disabled until the checkbox
next to it is checked.
I can create that just fine. But the problem is when there are many items and list is too long. So I need the checkboxlist to be displayed in a dropdown list style. The dropdown list is similar to this one:
But there seems no way I can have a textbox next to each item. Anybody could help?
In [bootstrap-multiselect documentation](http://davidstutz.de/bootstrap-multiselect/#templates), we can find that it provides templates option for us to control the generated
HTML markup. To append/display a TextBox next to each item, you can refer to the following code sample.
Thank you Fei Han for that. That's very helpful. Just wondering if it's possible to display the number next to each selection. so it will display:
Tomatoes 12 Mangoes 2 and so on.
Based on your requirement, I updated the code, please refer to it.
<script>
$(document).ready(function () {
$('#example-getting-started').multiselect({
templates: {
li: '<li><a><label style="display:inline;"></label><input type="text" class="txt_quantity_style" disabled/></a></li>'
},
onChange: function (option, checked) {
var input_id = "input[id='" + $(option).val() + "_quantity']";
if (checked) {
$(input_id).removeAttr("disabled");
} else {
$(input_id).prop("disabled", true);
}
}
});
$("ul.multiselect-container li a label.checkbox").each(function (index) {
$(this).next("input[type='text']").prop("id", $(this).attr("title").toLowerCase() + "_quantity");
});
$("input.txt_quantity_style").bind("blur", function () {
var txt_n = $(this).val();
Resetselectedtext();
})
});
function Resetselectedtext() {
var res = "";
var txt_st = $("button.multiselect").prop("title");
$("ul.multiselect-container li.active").each(function () {
var n = $(this).find("input[type='text']").val() == "" ? 0 : parseFloat($(this).find("input[type='text']").val());
res += $(this).find("label").prop("title") + " " + n + ",";
});
$("span.multiselect-selected-text").text(res);
}
</script>
Test Result:
Besides, if you have further question/feedback about customized functionalities with bootstrap-multiselect, you can create issue to report it on github.
Member
424 Points
1811 Posts
Checkboxlist with textbox displayed in dropdownlist style angularjs
Mar 07, 2019 02:04 AM|asplearning|LINK
Hello everyone, I have this requirement that I need a dropdown list that allows multiple selection as well as a textbox to enter quantity for each check. In a way it's checkboxlist with a textbox next to each checkbox. The textbox is disabled until the checkbox next to it is checked.
I can create that just fine. But the problem is when there are many items and list is too long. So I need the checkboxlist to be displayed in a dropdown list style. The dropdown list is similar to this one:
https://angular-ui.github.io/ui-select/demo-multiple-selection.html
Any ideas how this can be done?
Thanks.
Member
424 Points
1811 Posts
Re: Checkboxlist with textbox displayed in dropdownlist style angularjs
Mar 07, 2019 02:24 AM|asplearning|LINK
After some searching, I found bootstrap multiselect is very close to what I want to do :
https://github.com/davidstutz/bootstrap-multiselect
But there seems no way I can have a textbox next to each item. Anybody could help?
All-Star
40485 Points
6233 Posts
Microsoft
Re: Checkboxlist with textbox displayed in dropdownlist style angularjs
Mar 07, 2019 07:44 AM|Fei Han - MSFT|LINK
Hi asplearning,
In [bootstrap-multiselect documentation](http://davidstutz.de/bootstrap-multiselect/#templates), we can find that it provides templates option for us to control the generated HTML markup. To append/display a TextBox next to each item, you can refer to the following code sample.
<select id="example-getting-started" multiple="multiple"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="onions">Onions</option> </select><script> $(document).ready(function () { $('#example-getting-started').multiselect({ templates: { li: '<li><a><label style="display:inline;"></label><input type="text" class="txt_quantity_style" disabled/></a></li>' }, onChange: function (option, checked) { if (checked) { var input_id = "input[id='" + $(option).val() + "_quantity']"; $(input_id).removeAttr("disabled"); } else { var input_id = "input[id='" + $(option).val() + "_quantity']"; $(input_id).prop("disabled", true); } } }); $("ul.multiselect-container li a label.checkbox").each(function (index) { $(this).next("input[type='text']").prop("id", $(this).attr("title").toLowerCase() + "_quantity"); }); }); </script><style> .txt_quantity_style{ color:black; } </style>Test Result:
With Regards,
Fei Han
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.
Member
424 Points
1811 Posts
Re: Checkboxlist with textbox displayed in dropdownlist style angularjs
Mar 07, 2019 08:12 PM|asplearning|LINK
Thank you Fei Han for that. That's very helpful. Just wondering if it's possible to display the number next to each selection. so it will display:
Tomatoes 12 Mangoes 2 and so on.
All-Star
40485 Points
6233 Posts
Microsoft
Re: Checkboxlist with textbox displayed in dropdownlist style angularjs
Mar 08, 2019 03:15 AM|Fei Han - MSFT|LINK
Hi asplearning,
Based on your requirement, I updated the code, please refer to it.
<script> $(document).ready(function () { $('#example-getting-started').multiselect({ templates: { li: '<li><a><label style="display:inline;"></label><input type="text" class="txt_quantity_style" disabled/></a></li>' }, onChange: function (option, checked) { var input_id = "input[id='" + $(option).val() + "_quantity']"; if (checked) { $(input_id).removeAttr("disabled"); } else { $(input_id).prop("disabled", true); } } }); $("ul.multiselect-container li a label.checkbox").each(function (index) { $(this).next("input[type='text']").prop("id", $(this).attr("title").toLowerCase() + "_quantity"); }); $("input.txt_quantity_style").bind("blur", function () { var txt_n = $(this).val(); Resetselectedtext(); }) }); function Resetselectedtext() { var res = ""; var txt_st = $("button.multiselect").prop("title"); $("ul.multiselect-container li.active").each(function () { var n = $(this).find("input[type='text']").val() == "" ? 0 : parseFloat($(this).find("input[type='text']").val()); res += $(this).find("label").prop("title") + " " + n + ","; }); $("span.multiselect-selected-text").text(res); } </script>Test Result:
Besides, if you have further question/feedback about customized functionalities with bootstrap-multiselect, you can create issue to report it on github.
https://github.com/davidstutz/bootstrap-multiselect/issues
With Regards,
Fei Han
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.