Is there a way by which I can validate select two only to allow a minimum number of selection length as it has for maximumSelectionLength
.
I have tried minimumSelectionLength
but it does not work for me :
<link rel="stylesheet" type="text/css" href="select2/select2.min.css" />
<script src="select2/select2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".selecte").select2();
maximumSelectionLength: 15;
});
</script>
So I want the button not to submit until the user selects up to like 3 items.
Any ideas or suggestion.
To set selected value of jQuery Select2 with JavaScript, we call val and then trigger . Then we set its value with val to the option with value 0. Finally, we call trigger with 'change' to update the drop down to show the value we set.
Adding the following is enough: . select2-container . select2-choice { height: 200px; } To have it apply only after an object is selected, add/modify the corresponding css on a change event or similar. This changes the height of the select2 input field, which is not what was asked for.
New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data.text, data.id, false, false); $('#mySelect2').append(newOption).trigger('change');
This POC is intended to illustrate Select2, a JQuery Plugin which is used as a replacement for select box with support for searching, tagging, remote data sets, infinite scrolling and many other highly used options and contains event handling.
select2
plugin don't have any attribute for this purpose so you could validate the select
element want in submit
event make you condition then submit when it's achieved :
$('form').on('submit', function(){
var minimum = 3;
if($(".selecte").select2('data').length>=minimum)
return true;
else
return false;
});
Hope this helps.
$(".selecte").select2();
$('form').on('submit', function(){
var minimum = 2;
if($(".selecte").select2('data').length>=minimum){
alert('Submited...')
return true;
}else {
alert('Please shoose at least '+minimum+' item(s)')
return false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<form>
<select multiple class="selecte" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<br>
<input type='submit' />
</form>
var min = 1;
$('input[type="submit"]').on('click', function(event){
if ($('#group_select option:selected').size() < min) {
alert("Need at least one group");
event.preventDefault();
}
});
Popup a alert if the min requirement is not satisfied.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With