简体   繁体   English

向我的Select2添加选项

[英]Add options to my Select2

I have one problem. 我有一个问题。 I use Select2 in my page, and I would like to modify it a little. 我在页面中使用Select2 ,我想对其进行一些修改。 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 JSFIDDLE示例

In this example displays the text from the downloaded JSON. 在此示例中,显示下载的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 . 输入文字时,它会出现在带有JSON的第三个值version旁边,但是如果我单击值version则不会添加到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. 但是如果单击某些选项(例如text_1 ),则只会将选择version text_1 no version添加到选择框,即到目前为止。 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? 有什么建议我该怎么做?

With templateSelection and templateResult you can control both the search results and the view of selected item 使用templateSelectiontemplateResult您可以控制搜索结果和所选项目的视图

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM