Select2 选项与返回值不同

Question

我有一组具有 ID 和描述的对象（以 JSON 形式）。

我需要用户能够在下拉菜单中看到 ID 或描述，但是当他们 select ID 或描述时，对象的 ID 必须 returned。

对象看起来像这样：

{
"id": 100
"name": "George Washington"
"description": "The first president of the United States."
}

在下拉菜单中，我希望同时显示 100 和 George Washington。当用户selects其中任何一个时，我想要return100。关于如何实施此行为的任何想法？

Answer 1

您可以在此 fiddle 找到一个简单的实现： https://jsfiddle.net/2j8e5ugd/

基本上您需要遍历 json 并将数据添加到 select 列表。

HTML

<select id='s1'>

</select>

脚本

$(document).ready(function(){
  var data = [{
  "id": 100,
  "name": "George Washington",
  "description": "The first president of the United States."
  },{
  "id": 101,
  "name": "George Washington2",
  "description": "The first president of the United States."
  }]
  //fetch your data in this data variable
  for(var i = 0; i<data.length; i++){
        $('#s1').append($('<option>', {value:data[i].id, text:data[i].id}));
    $('#s1').append($('<option>', {value:data[i].id, text:data[i].name}));
  }
});

希望对您有所帮助

Answer 2

您可以更改要传递给 select2 的数据，以便具有双重元素：第一个显示 ID，第二个显示名称或描述，两者具有相同的 ID。

var data = [{
  "id": 100,
  "name": "George Washington",
  "description": "The first president of the United States."
}, {
  "id": 101,
  "name": "1111",
  "description": "111111111111."
}];

// convert your input data
var result = [];
data.forEach(function(obj, idx) {
  result.push({id: obj.id, text: obj.id})
  result.push({id: obj.id, text: obj.name});
});

$(".js-example-data-array").select2({
  data: result
}).on('change', function(e) {
  console.log('Selected: ' + this.value);
}).trigger('change')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<select class="js-example-data-array"></select>

Select2 选项与返回值不同

Select2 Options different from value that is returned

jquery

jquery-select2

select2