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.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
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.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
429 Points
1829 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
429 Points
1829 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
40565 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.
Test Result:
With Regards,
Fei Han
Member
429 Points
1829 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
40565 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.
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