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">

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");

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

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

comments powered by Disqus


  • What's Next for ASP.NET Core and Blazor

    Since its inception as an intriguing experiment in leveraging WebAssembly to enable dynamic web development with C#, Blazor has evolved into a mature, fully featured framework. Integral to the ASP.NET Core ecosystem, Blazor offers developers a unique combination of server-side rendering and rich client-side interactivity.

  • Nearest Centroid Classification for Numeric Data Using C#

    Here's a complete end-to-end demo of what Dr. James McCaffrey of Microsoft Research says is arguably the simplest possible classification technique.

  • .NET MAUI in VS Code Goes GA

    Visual Studio Code's .NET MAUI workload, which evolves the former Xamarin.Forms mobile-centric framework by adding support for creating desktop applications, has reached general availability.

  • Visual Studio Devs Quick to Sound Off on Automatic Updates: 'Please No'

    A five-year-old Visual Studio feature request for automatic IDE updates is finally getting enacted by Microsoft amid a lot of initial developer pushback, seemingly misplaced.

  • First Official OpenAI Library for .NET Goes Beta

    Although it seems Microsoft and OpenAI have been deeply intertwined partners for a long time, they are only now getting around to releasing an official OpenAI library for .NET developers, joining existing community libraries.

Subscribe on YouTube