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/.

comments powered by Disqus

Featured

  • Xamarin.Forms 5 Preview Ships Ahead of .NET 6 Transition to MAUI

    Microsoft shipped a pre-release version of Xamarin.Forms 5 ahead of a planned transition to MAUI, which will take over beginning with the release of .NET 6 in November 2021.

  • ML.NET Improves Object Detection

    Microsoft improved the object detection capabilities of its ML.NET machine learning framework for .NET developers, adding the ability to train custom models with Model Builder in Visual Studio.

  • More Improvements for VS Code's New Python Language Server

    Microsoft announced more improvements for the new Python language server for Visual Studio Code, Pylance, specializing in rich type information.

  • Death of the Dev Machine?

    Here's a takeaway from this week's Ignite 2020 event: An advanced Azure cloud portends the death of the traditional, high-powered dev machine packed with computing, memory and storage components.

  • COVID-19 Is Ignite 2020's Elephant in the Room: 'Frankly, It Sucks'

    As in all things of our new reality, there was no escaping the drastic changes in routine caused by the COVID-19 pandemic during Microsoft's big Ignite 2020 developer/IT pro conference, this week shifted to an online-only event after drawing tens of thousands of in-person attendees in years past.

Upcoming Events