I need to select only 3 options from the multiple select. If user selects more than 3 options than the last selected element should be replaced by the new one clicked.

I have a example as follows:

<select multiple id='testbox'>
      <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>

When user selects

First option
Second option
Third option

Now he reaches max selection limit 3 .If he click on the another option like Tenth Option I need to remove Third option and get selected Tenth option

For that i tried this but no idea how I can achieve my goal

<script type="text/javascript">
    google.load("jquery", "1");

    $(document).ready(function() {
        //alert("1111");
      var last_valid_selection = null;

      $('#testbox').change(function(event) {
        if ($(this).val().length > 2) {
          alert('You can only choose 2!');
          $(this).val(last_valid_selection);
        } else {
          last_valid_selection = $(this).val();
          latest_value = $("option:selected:last",this).val()
          alert(latest_value);
        }
      });

    });
    </script>

Please suggest some idea or solution.

I need to select only 3 options from the multiple select. If user selects more than 3 options than the last selected element should be replaced by the new one clicked.

I have a example as follows:

<select multiple id='testbox'>
      <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>

When user selects

First option
Second option
Third option

Now he reaches max selection limit 3 .If he click on the another option like Tenth Option I need to remove Third option and get selected Tenth option

For that i tried this but no idea how I can achieve my goal

<script type="text/javascript">
    google.load("jquery", "1");

    $(document).ready(function() {
        //alert("1111");
      var last_valid_selection = null;

      $('#testbox').change(function(event) {
        if ($(this).val().length > 2) {
          alert('You can only choose 2!');
          $(this).val(last_valid_selection);
        } else {
          last_valid_selection = $(this).val();
          latest_value = $("option:selected:last",this).val()
          alert(latest_value);
        }
      });

    });
    </script>

Please suggest some idea or solution.

• javascript
• jquery
• html
• multi-select

3 Answers 3

This works quite nicely:

var lastSelected;

$("#testbox").change(function() {
    var countSelected = $(this).find("option:selected").length;

    if (countSelected > 3) {
        $(this).find("option[value='" + lastSelected + "']").removeAttr("selected");
    }
});

$("#testbox option").click(function() {
    lastSelected = this.value;
});

I had to set a global variable lastSelected as well as an options click event to capture the actual last option clicked (this.value in the change event was giving me the top selected option, not the actual last option).

Demo: http://jsfiddle/JAysB/1/

Well, I don't like jQuery, so I've developed the same (fiddle), but in pure, vanilla, easy-to-read JavaScript:

document.getElementById('testbox').selopt=new Array();
document.getElementById('testbox').onchange=function(){
    for(i=0; i<this.childNodes.length; i++)
        if(this.childNodes[i].tagName!='OPTION')
            continue;
        else{
            if(this.childNodes[i].selected &&
               this.selopt.indexOf(this.childNodes[i])<0)
                this.selopt.push(this.childNodes[i]);
        }
    if(this.selopt.length==4)
        this.selopt.splice(2,1)[0].selected=false;
}

P. S. No global variables! :P

var lastOpt;
$('#testbox option').click(function () {
    lastOpt = $(this).index();
});
$('#testbox').change(function () {
    if ($('option:selected', this).length > 3) {
        $(' option:eq(' + lastOpt + ')', this).removeAttr('selected');
    }
});

JSFIDDLE