javascript - Select2 4.0 initial value in ajax mode - Stack Overflow

admin管理员组

文章数量:1345197

I have the following select on my page:

<select><option value="1" selected="selected">Caption</option></select>

I call select2 (v 4.0) init:

city.select2({
    ajax: {
        url: <...>,
        data: <...>,
        processResults: <...>,
        cache: true
    },
    escapeMarkup: function(markup){ return markup; },
    minimumInputLength: 0,
    templateResult: function(repo){ return repo.name; },
    templateSelection: function(repo){ return repo.name; }
});

The problem is that select2 is resetting default selected value and showing blank string. Is there any way to set default value on select2 init?

I have the following select on my page:

<select><option value="1" selected="selected">Caption</option></select>

I call select2 (v 4.0) init:

city.select2({
    ajax: {
        url: <...>,
        data: <...>,
        processResults: <...>,
        cache: true
    },
    escapeMarkup: function(markup){ return markup; },
    minimumInputLength: 0,
    templateResult: function(repo){ return repo.name; },
    templateSelection: function(repo){ return repo.name; }
});

The problem is that select2 is resetting default selected value and showing blank string. Is there any way to set default value on select2 init?

• javascript
• jquery
• ajax
• jquery-select2
• jquery-select2-4

Share Improve this question Follow edited Dec 30, 2017 at 10:40 Leith 3,29911 gold badge3232 silver badges4040 bronze badges asked May 20, 2015 at 14:43 EddieEddie 1,66388 gold badges2525 silver badges4545 bronze badges 2

• 1 I think you might want to use the initSelection option. I don't have a working example off hand but you might want to look into that for your solution. – Jeff Treuting Commented May 20, 2015 at 14:49
• possible duplicate of Select2 4.0.0 initial value with Ajax – Kevin Brown-Silva Commented May 20, 2015 at 15:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The issue was in your templateSelection method, as you are expecting a name property to be on your data object. Aside from the fact that text is now required and you wouldn't need the method if you re-mapped it, you aren't handling the case where the data object has a text property.

city.select2({
    ajax: {
        url: <...>,
        data: <...>,
        processResults: <...>,
        cache: true
    },
    escapeMarkup: function(markup){ return markup; },
    minimumInputLength: 0,
    templateResult: function(repo){ return repo.name || repo.text; },
    templateSelection: function(repo){ return repo.name || repo.text; }
});

This should fix your issue and display the initial selections properly.

The select2 docs now have an example of how to do this.

// Set up the Select2 control
$('#mySelect2').select2({
  ajax: {
    url: '/api/students'
  }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
  type: 'GET',
  url: '/api/students/s/' + studentId
}).then(function (data) {
  // create the option and append to Select2
  var option = new Option(data.full_name, data.id, true, true);
  studentSelect.append(option).trigger('change');

  // manually trigger the `select2:select` event
  studentSelect.trigger({
    type: 'select2:select',
    params: {
      data: data
    }
  });
});

Basically, configure select2 for ajax and then pre-fill with the desired object. The magic is done in the last bit, .trigger() which causes select2 to pick up the change and render it.

本文标签： javascriptSelect2 40 initial value in ajax modeStack Overflow