Skip to Navigation

JQuery: Multi-select Box Alternative

All of us have seen HTML multi-select lists. Clicking on an item without holding down the CTRL key will unselect all other elements in the list. That can get pretty annoying, especially with long lists. Thanks to jQuery and a clever use of DIV elements, we can work around this problem. The first example shows a standard multi-select list, and the second example uses the DIV method (view the source). Some jQuery key events can also be added to imitate SHIFT+click. HTML code:
<div class="select v2">
  <div class="option" value="bird">Bird</div>
  <div class="option" value="plane">Plane</div>
  <div class="option" value="superman">Superman</div>
  <div class="option" value="long">Some really really long title that far exceeds the box width</div>
</div>
Javascript code:
$(function() {
    $(".v2 .option").click(function() {
        $(this).toggleClass("active");
        $(".v2 .active").each(function() {
            // Show the value of each selected element
            var pickval = $(this).attr("value");
            alert(pickval);
        });
    });
});
Add some CSS, like .active { background: blue; }, and you're ready to roll!