Question

我有一组具有ID和描述的对象（采用JSON格式）。

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

对象看起来像这样：

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

在下拉菜单中，我希望同时显示100和George Washington。当用户选择其中任何一个时，我想返回100。有关如何实现此行为的任何想法？

Answer 1

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

＆＃13;

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')

＆＃13;

<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>

＆＃13;

Answer 2

你可以在这个小提琴上找到一个简单的实现： https://jsfiddle.net/2j8e5ugd/

基本上你需要迭代json并将数据添加到选择列表。

<强> 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}));
  }
});

希望有所帮助

Select2选项与返回的值不同

2 个答案: