Xóa phần tử được chọn cuối cùng khỏi lựa chọn nhiều nếu người dùng chọn nhiều hơn 3 tùy chọn bằng cách sử dụng jquery

Question

Tôi chỉ cần chọn 3 tùy chọn từ nhiều lựa chọn. Nếu người dùng chọn nhiều hơn 3 tùy chọn so với phần tử được chọn cuối cùng nên được thay thế bằng phần tử mới được nhấp.

Tôi có một ví dụ như sau:

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

Khi người dùng chọn

First option 
Second option 
Third option 

Bây giờ anh đạt lựa chọn giới hạn tối đa 3 .Nếu anh nhấp vào tùy chọn khác như Lựa chọn thứ mười tôi cần để xóa Tùy chọn thứ ba và được chọn Tùy chọn thứ mười

Cho rằng tôi đã cố gắng này, nhưng không biết làm thế nào tôi có thể đạt được mục tiêu của tôi

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

Xin gợi ý một số ý tưởng hay giải pháp.

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

này hoạt động khá độc đáo:

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

tôi phải thiết lập một biến toàn cầu lastSelected cũng như một tùy chọn nhấp vào sự kiện để nắm bắt những lựa chọn thực tế cuối cùng nhấp (this.value trong trường hợp thay đổi đã đem lại cho tôi đầu chọn tùy chọn, không phải tùy chọn cuối cùng thực tế).

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

Answer 3

Vâng, tôi không thích jQuery, vì vậy tôi đã phát triển như nhau (fiddle), nhưng trong tinh khiết, vani, dễ đọc to-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 Không có biến toàn cầu! : P