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 principal in PH&V Information Services, specializing in Web development with expertise in SOA, client-side development, and user interface design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His most recent book ("rtfm*") is on writing effective user manuals, and his blog on language and technical writing can be found at rtfmphvis.blogspot.com.

comments powered by Disqus
Upcoming Events

.NET Insight

Sign up for our newsletter.

I agree to this site's Privacy Policy.