I have a simple html multi-select dropdown list

<select id="transactionType" multiple="multiple" size="10">
  <option value="ALLOC">ALLOC</option>
  <option value="LOAD1">LOAD1</option>
  <option value="LOAD2">LOAD2</option>
  <!-- etcetera... -->
</select>

I want to continue to use this list in the event that javascript is disabled however with javascript i would like to render the list as a multi-select dropdown list That is it only shows one item in the list until clicked and then will expand to show x items and provide scrolling, where i can select multiple elements as you would expect while holding shift or ctrl.

New to jQuery was searching the http://jquery.com/ but haven't yet found what I need.

Edit Struts2 users, the selected answer will url encode with [] this causes issues in struts2 the fix however is very easy. Simply open jquery.multiSelect.js and search for "[]" and delete the one instance this is used in a string concatenation. I also am using jQuery 1.4.4 as opposed to the 1.3.2 which came bundled with it and everything works just fine.

Best Answer

Update (2017): The following two libraries have now become the most common drop-down libraries used with Javascript. While they are jQuery-native, they have been customized to work with everything from AngularJS 1.x to having custom CSS for Bootstrap. (Chosen JS, the original answer here, seems to have dropped to #3 in popularity.)

Select2: https://select2.github.io/
Selectize: http://selectize.github.io/selectize.js/

Obligatory screenshots are below

Select2:

Selectize:

Original answer (2012) : I think that the Chosen library might also be useful. It's available in jquery prototype and mootools versions

Attached is a screenshot of how the multi-select functionality looks in chosen.

Chosen library