एकाधिक चयन से अंतिम चयनित तत्व निकालें यदि उपयोगकर्ता jquery

Question

का उपयोग कर 3 से अधिक विकल्प का चयन करता है तो मुझे एकाधिक चयन से केवल 3 विकल्प चुनने की आवश्यकता है। यदि उपयोगकर्ता अंतिम चयनित तत्व की तुलना में 3 से अधिक विकल्पों का चयन करता है तो उसे नए क्लिक करके प्रतिस्थापित किया जाना चाहिए।

मैं इस प्रकार एक उदाहरण है:

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

उपयोगकर्ता का चयन करता है

First option 
Second option 
Third option 

अब वह अधिकतम चयन सीमा 3 पर पहुंचता है.अगर वह दसवीं विकल्प मैं की जरूरत है की तरह एक और विकल्प पर क्लिक करें को हटाने के लिए तीसरा विकल्प और चयनित दसवां विकल्प

कि मैं इस कोशिश की, लेकिन कोई पता नहीं मैं कैसे मेरे लक्ष्य को प्राप्त कर सकते हैं

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

कृपया कुछ विचार या समाधान सुझाव देते हैं।

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

यह काफी अच्छी तरह से काम करता है:

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

मैं एक विकल्प घटना क्लिक के रूप में वास्तविक अंतिम विकल्प क्लिक किया (this.value परिवर्तन घटना में मुझे चयनित शीर्ष दे रहा था पर कब्जा करने के साथ ही एक वैश्विक चर lastSelected स्थापित करने के लिए किया था विकल्प, वास्तविक अंतिम विकल्प नहीं)।

डेमो: http://jsfiddle.net/JAysB/1/

Answer 3

ठीक है, मैं jQuery पसंद नहीं है, तो मैं एक ही (fiddle) विकसित की है, लेकिन शुद्ध, वेनिला में, आसानी से पढ़ने के लिए जावास्क्रिप्ट:

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

पीएस कोई वैश्विक चर! : पी