Is there a way to create a drop down list with check boxes as list items? (asp.net)

I was looking to create a drop-down list mechanism with check boxes with days of the week so that you could select which days of the week you wanted.

I haven't seen much on this, and you cannot just add checkboxes within a list item. I've also tried alternatives such as using a button and a panel, but it would disappear after selecting one checkbox.

Any help or insight on how to make either work functionally/as intended would be appreciated. Thanks.

This is a good question, since the many examples for a dropdown with a check box tends to be rather elusive for a good working example. And often if you use a data bound control like a ListBox, then add-ins that show a check box tend to not work with asp.net controls. Before you go down this road, perhaps a simple ListBox would suffice? A ListBox allows multiple selections, and they are code behind friendly in terms of databinding. So, one could consider a ListBox, say like this:

            <h4>Select weekdays</h4>
            <asp:ListBox ID="lstWeekDays" runat="server"
                SelectionMode="Multiple" Height="140px" Width="130px"
                >
                <asp:ListItem>Monday</asp:ListItem>
                <asp:ListItem>Tuesday</asp:ListItem>
                <asp:ListItem>Wednesday</asp:ListItem>
                <asp:ListItem>Thusday</asp:ListItem>
                <asp:ListItem>Friday</asp:ListItem>
                <asp:ListItem>Saturday</asp:ListItem>
                <asp:ListItem>Sunday</asp:ListItem>
            </asp:ListBox>

And the above thus becomes this:

The only real downsides of List Box’s are they always are in plain view (expanded). This choice thus takes up a lot of extra screen space. However, more of an issue is the user has to hold down the control-key to select multiple items. While at one time, use of holding down the control key was common windows knowledge, for web land, this knowledge is not at all common knowledge by typical users, especially those using an iPad or even a smartphone. The result is you often see instructions such as Hold down ctrl-key for multiple items. As noted, with touch screens, tablets and phones, then this type of UI has not been used for years.

There is however a nice add-in that takes a standard "select" and converts that list box into a dropdown, and adds checkboxes to the list.

The result of adopting the add-in is this:

The above is achieved by using this jQuery library:

https://github.com/davidstutz/bootstrap-multiselect

The above also requires bootstrap.

Hence, the above example thus becomes this:

<h4>Select weekdays</h4>
<asp:ListBox ID="lstWeekDays" runat="server" ClientIDMode="Static"
    SelectionMode="Multiple" Height="140px" Width="130px">
    <asp:ListItem>Monday</asp:ListItem>
    <asp:ListItem>Tuesday</asp:ListItem>
    <asp:ListItem>Wednesday</asp:ListItem>
    <asp:ListItem>Thusday</asp:ListItem>
    <asp:ListItem>Friday</asp:ListItem>
    <asp:ListItem>Saturday</asp:ListItem>
    <asp:ListItem>Sunday</asp:ListItem>
</asp:ListBox>

<script>

    $(document).ready(function () {

        $('#lstWeekDays').multiselect({
            enableRestbutton: true,
            resetbuttonText: 'Clear',
            nonSelectedText: 'Select Weekdays >>'

        })
    });


</script>

Code behind to get all selected items is thus:

Protected Sub Button2_Click(sender As Object, e As EventArgs)


    For Each MyChoice As ListItem In lstWeekDays.Items

        If MyChoice.Selected Then

            Debug.Print($"Selected item = {MyChoice.Text}")

        End If
    Next

End Sub