Remove Default selection in Select2 Jquery Plugin

Question

I am using select2 for Multiselect option in my form.In the form I am using key controls to traverse thru the form.So If I press tab key it should traverse thru the fields in the forms.When I press tab to go to select2 textbox,it opens the options with default selection of first item.When I press tab to move to another field,it automatically selected.I want to avoid this.Please help...

I want to avoid default first element selection in select2 plugin.I have tried remove highlight() function when calling select2.It is working but not able to select element.

    $("#" + elementID).select2({
        data: {results: itemArray, name: 'name'},
        formatSelection: format,
        formatResult: format,
        multiple: true,
        closeOnSelect: false,
        height: height,
        width: width,
        allowClear:true,
        initSelection: function (element, callback) {
            var data = [];
            $(element.val().split(",")).each(function () {
               data.push({id: this.toString(), name: this.toString()});
            });
           return callback(data);
        },
        createSearchChoice: function (term, data) {
            
            if ($(data).filter(function () {
                return this.name.localeCompare(term) === 0;
            }).length === 0) {
               return {id: term, name: term};
            }
    
        }

    }).select2('data', null).one('select2-focus', select2Focus).on("select2-blur", function () {
    $(this).one('select2-focus', select2Focus);
});

Cascarilla

Have you tried allowClear option? – Sextuplet

Yes but that also doesn't work – Cascarilla

You can try adding empty value {id:'', text:''} which would be first item and would get selected – Sextuplet

where I can add this line.Either to initselection..I will attach my code in the question itself.Pls refer it – Cascarilla

you should append it to the data array which you pass when initialize select2 – Sextuplet

jsfiddle.net/ykLnp54w/1 I cannot see the problem you're facing, can you try to reproduce it in fiddle? – Sextuplet

related - https://mcmap.net/q/278774/-how-to-use-placeholder-as-default-value-in-select2-framework/104380 – Colley

Answer 1

You might need to add the multiple attribute to the select itself

<select class="js-data-example-ajax" multiple="multiple">
...
</select>

Ref: https://github.com/select2/select2/issues/3878

Utley

I've been searching for an answer for the last 2 hours and because this one had an downvote i didn't test it right away :sad thanks @Utley – Carlsbad

Answer 2

Put this as a first option in your select, in HTML

<option value="" selected disabled>Select item...</option>

Scheck

Answer 3

Adding an empty option will fix the issue.

$(document).ready(function() {
  	$('select').select2({
		placeholder: {
		    id: '', // the value of the option
		    text: 'None Selected'
		  },
		  allowClear: true
		});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select style="width : 150px">
        <option value=""></option>
        <option value="AL">Alabama</option>
        <option value="NJ">New Jesrsey</option>
</select>

Eboat

placeholder: {value: '',text: 'None Selected'}, – Daph

@YasserCHENIK It is placeholder: {id: '',text: 'None Selected'} – Casares

@KoikiDamilare in your comment, you said // the value of the option but id: != value: – Daph

@YasserCHENIK I did not make the comment, I only replied you cos I tried the answer in the comment and it worked, I changed id to value like you stated but it did not work – Casares

@KoikiDamilare Alright. But that's a little bit weird. – Daph

Answer 4

i was fetching same issue, so i was applied this method, then it is working fine now

<select class="form-control addon-service-dropdown" name="addon_service[]" multiple="multiple">
      <option value="1">Option 1 </option>
      <option value="2">Option 2 </option>
      <option value="3">Option 3 </option>
      <option value="4">Option 4 </option>
</select>

and my selec2 jquery code is below :

$('.addon-service-dropdown').select2({
          placeholder : 'Select Service',
          multiple : true,
          allowClear: true,
      });

Tetraspore

Hi Milan, thank you for the contribution! Could you please add a little bit of context on where to add this html element, maybe by providing the full code using the snippet feature? – Pond