Make a Single-Choice List a Multi-Choice List with JavaScript
There's no way to tell just by looking at a list whether the list supports multiple or single selections.
I don't much care for multiple selection dropdown lists. One reason is that I suspect most users don't know how make multiple selections. But more importantly, there's no way to tell just by looking at a list whether the list supports multiple or single selections.
But what if you allowed the user to activate multiple selections? Then there would be a visual indicator on the page to let users know they could make the choice. And, presumably, only the users who knew how to make multiple selections would take advantage of the option.
As an example, here's a listbox with some items in it:
<asp:ListBox ID="ListBox1" runat="server">
<asp:ListItem>Item1</asp:ListItem>
<asp:ListItem>Item2</asp:ListItem>
<asp:ListItem>Item3</asp:ListItem>
</asp:ListBox>
To let the user make the selection, I'll add a checkbox that, for simplicity's sake, has a JavaScript function in its onChange event rather than assigned through jQuery:
<asp:CheckBox ID="CheckBox1" runat="server" Text="Enable multiple selection"
onChange="changeType();" />
The function tied to the onChange retrieves the current value of the checkbox and either updates or removes the multiple attribute on the listbox (that's the attribute that controls whether or not the listbox accepts multiple selections):
<script type="text/ecmascript">
function changeType() {
var res = $("#CheckBox1").attr("checked");
if (res==true)
{
$("#ListBox1").attr("multiple", "multiple");
}
else
{
$("#ListBox1").removeAttr("multiple");
}
}
</script>
And that works; the user can turn multiple selections on or off.
Of course, this wouldn't do any good unless you can process those multiple selections back on the server. The good news is that you can, even though the listbox was defined as supporting only single selection when it left the server. This code will find all the selected items and process them even if the listbox was converted to multiple selections at the client:
For Each item As ListItem In ListBox1.Items
If item.Selected = True Then
'process selected item
End If
Next
There is one wrinkle: if the user selects the multiple-choice option and submits the page, the checkbox will still show as checked but the listbox will have reverted to single selection when the page is redisplayed to the user. The simplest solution is to clear the checkbox on every postback. If you want a more complicated solution, then, on the server, repeat your client-side code and set the multiple selection option based on the user's setting:
Protected Sub CheckBox1_CheckedChanged(sender As Object, e As System.EventArgs)
Handles CheckBox1.CheckedChanged
If CheckBox1.Checked = True Then
Me.ListBox1.SelectionMode = ListSelectionMode.Multiple
Else
Me.ListBox1.SelectionMode = ListSelectionMode.Single
End If
End Sub
That's still not a perfect solution: changing the SelectionMode clears all the selected items except the first one, so when the listbox redisplays the first time after the user selects the multiple selection option, only the topmost selection will still show as selected. But a little more code in the CheckChanged event will fix that; I'll leave that additional code to you.
About the Author
Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at http://blog.learningtree.com/tag/ui/.