How do you limit the number of options selected in an HTML <select> element?

Question

I'm using a <select> element in a form I'm making that allows multiple selections, but I want to limit the maximum amount of selections to 10. Is this possible using JavaScript or jQuery?

Labyrinth

Welcome to StackOverflow, Tominated! – Breastpin

OK, i'll put it more into contect. it's an internal company email form with an automaticvally generated select box with every employee's name. I'm updating it so it will show which names you've already selected (it's a looooooong list) and so there is some client validation that you haven't selected more than 10 names (there is obviously sever side code to prevent this). The id for the select tag is "recipient_userid". i'll post what i have so far – Labyrinth

$(document).ready(function(){ var last_valid_selection = null; $("#recipient_userid").change(function(event){ var selected = ""; $("#recipient_userid option:selected").each(function () { selected += "<li>" + $(this).text() + "</li>"; }); $("#currentlySelected").html(selected); }).change(); }); – Labyrinth

Possible duplicate of Multiple Select limit number of selection – Koran

Answer 1

Here is some full code for you to use:

$(document).ready(function() {

  var last_valid_selection = null;

  $('#testbox').change(function(event) {
    if ($(this).val().length > 5) {
      alert('You can only choose 5!');
      $(this).val(last_valid_selection);
    } else {
      last_valid_selection = $(this).val();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select multiple id="testbox" size="10">
  <option value='1'>First Option</option>
  <option value='2'>Second Option</option>
  <option value='3'>Third Option</option>
  <option value='4'>Fourth Option</option>
  <option value='5'>Fifth Option</option>
  <option value='6'>Sixth Option</option>
  <option value='7'>Seventh Option</option>
  <option value='8'>Eighth Option</option>
  <option value='9'>Ninth Option</option>
  <option value='10'>Tenth Option</option>
</select>

Odessa

that's almost perfect! it doesn't select it again if last_valid_selection is an array. Thanks, though! – Labyrinth

I'm not sure what you mean. What doesn't select it again if last_valid_selection is an array? – Odessa

You may want to move last_valid_selection out of the global scope and into the ready anonymous function. – Alaster

@Justin Johnson - Good point. I'm still confused as to what doesn't work though. Works perfectly in Chrome (can't test IE at the moment). – Odessa

Works fine in FF 3.5.6 as well. I don't know what the down vote is for – Alaster

it's not working with the code i have so far. i have a comment on the op with soem more info on what i'm doing – Labyrinth

@Labyrinth - You downvoted me because the example I gave you doesn't work for your exact situation? – Odessa

@Topher, don't answer unless you're prepared to read minds! :) – Breastpin

@Jonathan +1 - LMAO. Thanks, I'm about to head to bed and I needed a laugh :-) – Odessa

+1 Good idea using jQuery's .val() to get all values (unlike .value in JS). Here is a demo. The problem is that it doesn't work in the rare case with repeated values. – Airline

Answer 2

This would limit the user to 3 options:

$("select").on("click", "option", function () {
    if ( 3 <= $(this).siblings(":selected").length ) {
        $(this).removeAttr("selected");
    }
});​​​​​​​​​​

Fiddle: http://jsfiddle.net/2GrYk/

Breastpin

This won't work if we use keyboard, or a glide'n click. – Bellyband

Answer 3

This answer works in those cases:

• Normal click
• Only mousedown (mouse is moved outside before mouseup)
• Keyboard
• If there are different options with the same value

Code:

$('#mySelect').on('change', function() {
    if (this.selectedOptions.length < 4) {
        $(this).find(':selected').addClass('selected');
        $(this).find(':not(:selected)').removeClass('selected');
    }else
        $(this)
        .find(':selected:not(.selected)')
        .prop('selected', false);
});

Demo

Or, for old browsers that don't support selectedOptions,

$('#mySelect').on('change', function() {
    var $sel = $(this).find(':selected');
    if ($sel.length < 4) {
        $sel.addClass('selected');
        $(this).find(':not(:selected)').removeClass('selected');
    }else
        $(this)
        .find(':selected:not(.selected)')
        .prop('selected', false);
});

Demo

Airline

Answer 4

Using jQuery you can attach a function to the change event and since it is a multiple select the val() will be an array. You can always check the length of the array and do something if its a predefined size. The following code demonstrates how you will know how many items are selected.

  $("#select").change(function(){
        alert($(this).val().length);
  });   

Printery

that will help a lot. is there a way to deselect evrything in a select box, also? – Labyrinth

@Labyrinth - Using jQuery, you can simply call $('#myselectbox_id').val(null); – Odessa

You can use this: $("#select").val([]); to set no options in the select list. – Printery

Answer 5

figured it out! here's the resulting code:

$(document).ready(function(){

var last_valid_selection = null;
var selected = "";

$("#recipient_userid").change(function(event){

    if ($(this).val().length > 10) {

        alert('You can only choose 10!');
        $(this).val(last_valid_selection);

    } else {

        last_valid_selection = $("#recipient_userid").val();

        $("#recipient_userid option:selected").each(function () {
            selected += "<li>" + $(this).text() + "</li>";
        });

        $("#currentlySelected").html(selected);
        selected = "";
    }

}).change();
});

Thanks for all your help guys!

Labyrinth

Tominated, this is not a forum. Your contributes ought only exist in the original question (you can edit it as much as you like). You should accept one of the many fine answers that were provided here. – Breastpin

Tominated, Jonathan is absolutely correct. The idea is to ask a question and select the best answer (you even get a few reputation for doing so). Very rarely do I not select an answer and even more rare is it that I answer my own question. However, this community is here to help each other, and I'm glad we helped you. – Odessa

Sorry guys, I was unaware about that. – Labyrinth

Answer 6

I basically merged a couple of the provided answers to make something specific to a particular ID:

$("#mySelect").on("click", "option", function(){
    var max = 3;
    if ( max <= $(this).siblings(":selected").length ) {
        alert("Only " + max + " selections allowed.");
        $(this).removeAttr("selected");
    }
});

Rob

Acetone

Answer 7

You can use jQuery

  $("select").change(function () {
      if($("select option:selected").length > 3) {
          //your code here
      }
  });

Tread

Answer 8

Here a pure vanilla JavaScript example, based on jilu's example.

const selectEls = document.querySelectorAll('select[multiple]');

selectEls.forEach((selectEl) => {
    selectEl.addEventListener('change', (e) => {

        const currentEl = e.currentTarget;

        let is = 0;
        for (let i = 0; i < currentEl.length; i++) {
            if (currentEl.options[i].selected) {
                is++;
            }
            if (is > 3) { // if you want more than 3 selected options, change the number here
                currentEl.options[i].selected = false;
            }
        }

    })
});

Smalltime

Answer 9

Voila! No Jquery necessary.

    var is = 0;
    for (var i = 0; i < selectCountryCode.length; i++) {
        if (selectCountryCode.options[i].selected) {
            is++;
        }
        if (is > 3) {
            selectCountryCode.options[i].selected = false;              
        }
    }

Jilusan

Hendren

This example seems incomplete, perhaps by intent since then it would involve jQuery? What is selectCountryCode? – Sussi

There's no need to avoid jQuery; it is anyway needed to run Selectize. – Construction