Usuń ostatni zaznaczony element z wielokrotnego wyboru, jeśli użytkownik wybierze więcej niż 3 opcję, używając jquery

Question

Muszę wybrać tylko 3 opcje z wielokrotnego wyboru. Jeśli użytkownik wybierze więcej niż 3 opcje, ostatni wybrany element powinien zostać zastąpiony przez nowy kliknięty.

Mam przykład w następujący sposób:

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

Gdy użytkownik wybierze

First option 
Second option 
Third option 

Teraz osiągnie limitu max wyboru 3 .Jeżeli on kliknąć na innej opcji jak Dziesiątego Opcji muszę usunąć Trzecią opcję i uzyskać wybraną Dziesiąta opcja

Do tego próbowałem tego, ale nie wiem, jak mogę osiągnąć mój cel

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

Proszę zaproponować jakiś pomysł lub rozwiązanie.

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

Działa to całkiem ładnie:

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

musiałem ustawić zmienną globalną lastSelected jak również opcje kliknij wydarzenie, aby uchwycić rzeczywisty ostatni kliknięciu opcji (this.value w przypadku zmiany dawał mi szczyt wybrany opcja, a nie ostatnia opcja).

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

Answer 3

Cóż, nie lubię jQuery, więc stworzyliśmy taką samą (fiddle), ale w czystym, wanilii, łatwy do odczytania 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 Brak zmiennych globalnych! : P