Rimuovi l'ultimo elemento selezionato dalla selezione multipla se l'utente seleziona più di 3 opzioni usando jquery

Question

Ho bisogno di selezionare solo 3 opzioni dalla selezione multipla. Se l'utente seleziona più di 3 opzioni, l'ultimo elemento selezionato dovrebbe essere sostituito dal nuovo cliccato.

Ho un esempio come segue:

<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> 

Quando l'utente seleziona

First option 
Second option 
Third option 

Ora egli raggiunge limite selezione max 3 .Se si cliccare sul un'altra opzione come Opzione Decimo ho bisogno rimuovere Terza opzione e ottenere selezionato Decima opzione

Per questo ho provato questo, ma non sa come posso raggiungere il mio obiettivo

<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> 

Si prega di suggerire qualche idea o soluzione.

Answer 1

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

Answer 2

Questo funziona abbastanza bene:

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

ho dovuto impostare una variabile globale lastSelected così come una delle opzioni di eventi click per catturare l'ultima opzione reale cliccato (this.value in caso cambiamento mi stava dando la parte superiore selezionato opzione, non l'ultima opzione effettiva).

Demo: http://jsfiddle.net/JAysB/1/

Answer 3

Beh, non mi piace jQuery, quindi ho sviluppato lo stesso (fiddle), ma in puro, vaniglia, facili da leggere 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; 
} 

PS Nessuna variabile globale! : P