Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting minimum value to select in select2 plugin

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.

like image 746
Omari Victor Omosa Avatar asked Feb 25 '16 18:02

Omari Victor Omosa


People also ask

How do I assign a value to Select2?

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.

How do I change the height of my Select 2?

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.

How do I add options in Select2?

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

Is Select2 a plugin?

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.


2 Answers

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>
like image 140
Zakaria Acharki Avatar answered Oct 09 '22 01:10

Zakaria Acharki


    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.

like image 30
arthur bryant Avatar answered Oct 09 '22 01:10

arthur bryant