CODEWITHSUNDEEP
javascriptjqueryjquery-select2jquery-select2-4
radek.
radek.

Reputation: 378

Add options to my Select2

I have one problem. I use Select2 in my page, and I would like to modify it a little. This is my example:

<select id="mySelect" multiple>
    <!-- -->
</select>

var data = [{
    id: 1, 
    text: "sample_1", 
    version: "1"
},{
    id: 2, 
    text: "sample_2", 
    version: "2"    
}]

$("#mySelect").select2({
    data: data
});

JSFIDDLE example

In this example displays the text from the downloaded JSON. But what if I wanted a to modify the search? When entering text, it appears next to a third value version with JSON, but if I click on value version will not add to select.

Eg. When i Search in select, my select looks like:

- text_1 - "version"
- text_2 - "version"

but if I click some option, for example text_1, that only adds to the select box text_1 no version, that is, as far. I think that the example of Templating shows a bit of my problem. Only when you click, for example, in Alaska flag disappears and the text remains in the select

Any suggestions how I can do this?

Upvotes: 1

Views: 265

Answers (1)

Luca Rainone
Luca Rainone

Reputation: 16458

With templateSelection and templateResult you can control both the search results and the view of selected item

$("#mySelect").select2({
  data:data,
  templateSelection: function(val) {
    return val.text +" - " + "version" + val.version;
  },
  templateResult: function(val) {
    return val.text +" "+ val.version;
  }
});

Upvotes: 1

Related Questions