CODEWITHSUNDEEP
javascripthtmlmulti-select
Prathamesh mhatre
Prathamesh mhatre

Reputation: 1085

select multiselect option limit up to 2

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.

Upvotes: 4

Views: 17220

Answers (4)

jayapriya
jayapriya

Reputation: 1

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

Upvotes: 0

FriendlyHacker
FriendlyHacker

Reputation: 61

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

});

Upvotes: 6

Samuel Parkinson
Samuel Parkinson

Reputation: 3112

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';
      }
}

Upvotes: 3

RobG
RobG

Reputation: 147363

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.

Upvotes: 1

Related Questions