select multiselect option limit up to 2

Question

I am using multiselect for different subject's I want to limit the select up to 2 and make the other's disabled in the same way if user deselect, Again the option must be available for the user.

<select multiple="multiple" class="subjects" name="subjects[]" style="float:left;width:205px;" size="5">
  <option value='1'>subject1</option>
  <option value='2'>subject2</option>
  <option value='3'>subject3</option>
  <option value='3'>subject3</option>
</select>

So far I have achieved to deselect only the last option which was selected after 2 and the code is as follow

    /**
     * Make sure the subject's limit is 2
     */
    $(".subjects option").click(function(e){

        if ($(this).parent().val().length > 2) {
            $(this).removeAttr("selected");
        }
    });

Thank you.

here is the answer http://stackoverflow.com/questions/2046205/how-do-you-limit-options-selected-in-a-html-select-box — CyberDem0n, Aug 08 '12 at 10:46
Thank's for the reply but I want to make all the remaining options disabled and in the link you provided it's only making the last option deselect. — Prathamesh mhatre, Aug 08 '12 at 10:52
Here is an example using pure javascript (http://stackoverflow.com/questions/4135210/html-multiselect-limit) — Mark Walters, Aug 08 '12 at 10:52
I suspect you can't selectively disable option elements in a way that will work in all browsers. — nnnnnn, Aug 08 '12 at 11:02

score 5 · Answer 1 · answered Nov 08 '13 at 16:04

Improved jQuery example, notice the (else enable) option, this fixes a bug on previous examples that disabled the select options permanently. Also removed the "Please select only two options." error message when possible. http://jsfiddle.net/c9CkG/25/

jQuery(document).ready(function () {

jQuery("select").on("change", function(){
  var msg = $("#msg");

  var count = 0;

  for (var i = 0; i < this.options.length; i++)
  {
    var option = this.options[i];

    option.selected ? count++ : null;

    if (count > 2)
    {
        option.selected = false;
        option.disabled = true;
        msg.html("Please select only two options.");
    }else{
        option.disabled = false;
        msg.html("");
    }
  }
});

});

Samuel Parkinson · Answer 2 · 2012-08-08T11:21:00.777

2

As an improvment on RobG's answer, you could unselect an option if it makes count > 2.

See: http://jsfiddle.net/c9CkG/3/ for a working example using jQuery.

function checkSelected(el) {
  var msgEl = document.getElementById('msg');
  var count = 0;

  for (var i=0, iLen=el.options.length; i<iLen; i++)

      el.options[i].selected? count++ : null;

      // Deselect the option.
      if (count > 2) {
          el.options[i].selected = false;
          el.options[i].disabled = true;

          msgEl.innerHTML = 'Please select only two options';
      }
}

edited Aug 08 '12 at 11:21

answered Aug 08 '12 at 11:11

Samuel Parkinson

2,992
1
27
38

1

Almost close but When the user deselect any one of the selected option the other option should be again available for selecting – Prathamesh mhatre Aug 08 '12 at 12:05
This should be simple enough for you to implement, on a change see if the max has been reached, the change is a deselect and it's not disabled, then enable the other options. – Samuel Parkinson Aug 08 '12 at 14:19

RobG · Answer 3 · 2012-08-08T11:06:04.790

Something like the following will do the job:

function checkSelected(el) {
  var msgEl = document.getElementById('msg');
  var count = 0;

  for (var i=0, iLen=el.options.length; i<iLen; i++)
      el.options[i].selected? count++ : null;

  msgEl.innerHTML = count > 2? 'Please select only two options' : '';
}
</script>

<span>Please select a maximum of two options:</span>
<select multiple onchange="checkSelected(this);">
  <option>0
  <option>1
  <option>2
  <option>3
</select>
<br>
<span id="msg"></span>

I don't think it's a good idea to disable options, you only care that only two are selected when the form is submitted. Until then, it doesn't matter.

score 0 · Answer 4 · edited Feb 17 '17 at 07:07

0

$(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();
    }
  });
});

edited Feb 17 '17 at 07:07

Maximilian Ast

3,369
12
36
47

answered Feb 17 '17 at 06:11

jayapriya

1
1

1

Why should the OP "try this"? It's normaly considered good form to explain your suggestions/answers. Code only answers can be surprisingly uninformative, even if they are technically correct. A **good answer** will always have an explanation of what was done and why it was done that way, not only for the OP but for future visitors to SO that may find this question and be reading your answer. – Maximilian Ast Feb 17 '17 at 07:02

select multiselect option limit up to 2

4 Answers4

Linked