Question

I am using knockout options binding and select2 plugin on a select list. Initially i do not want to select any option by default instead i want to show a text something like ‘Select country..’ and this text should be selected initially. For this i used knockout optionsCaption binding. It works fine, but if i apply select2 plugin on the select list the initial default text is not selected. Here my code:

HTML

<select data-bind="options: array, optionsCaption: 'All'" size="1">
</select>

JS

$('select').select2();

function VM(){
  this.array = 
    ['Afghanostan', 'Albania', 'Algeria', 'Argentina']; 
}

ko.applyBindings(new VM());

I have created a JSFIDDLE also.

How to solve this issue ?

Answer 1

Try this code

$('select').select2({
  placeholder: "ALL"
});


<select data-bind="options: array" size="1" style="width: 200px;">
    <option><option>
</select>

See this link http://jsbin.com/ivetel/19/edit