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.

• By Peter Vogel
• 07/09/2012

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