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

You can try adding empty value `{id:'', text:''}` which would be first item and would get selected — insanebits, Feb 25 '15 at 12:23
where I can add this line.Either to initselection..I will attach my code in the question itself.Pls refer it — rekha s, Feb 25 '15 at 12:32
you should append it to the data array which you pass when initialize select2 — insanebits, Feb 25 '15 at 12:33
http://jsfiddle.net/ykLnp54w/1/ I cannot see the problem you're facing, can you try to reproduce it in fiddle? — insanebits, Feb 25 '15 at 12:50

Tincho825 · Answer 1 · 2020-04-09T19:50:11.230

5

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

edited Apr 09 '20 at 19:50

answered Apr 09 '20 at 18:13

Tincho825

829
1
13
15

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 @Tincho825 – Samuel Aiala Ferreira Apr 10 '21 at 00:24

score 3 · Answer 2 · answered Jul 29 '18 at 13:21

3

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

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

answered Jul 29 '18 at 13:21

hocikto

871
1
14
29

score 1 · Answer 3 · answered Jul 26 '18 at 19:50

1

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>

answered Jul 26 '18 at 19:50

Jajikanth pydimarla

1,512
13
11

`placeholder: {value: '',text: 'None Selected'},` – Yasser CHENIK Mar 03 '22 at 13:31
@YasserCHENIK It is placeholder: {id: '',text: 'None Selected'} – Damilare Koiki Jun 06 '22 at 21:08
@KoikiDamilare in your comment, you said `// the value of the option` but `id:` != `value:` – Yasser CHENIK Jun 07 '22 at 13:08
@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 – Damilare Koiki Jun 08 '22 at 10:18
@KoikiDamilare Alright. But that's a little bit weird. – Yasser CHENIK Jun 08 '22 at 12:31

Remove Default selection in Select2 Jquery Plugin

3 Answers3