Select2 Параметры, отличные от возвращаемого значения

Question

У меня есть набор объектов (в форме JSON), у которых есть идентификатор и описание.

Мне нужен пользователь, чтобы иметь возможность видеть в ID или описании в раскрывающемся меню, но когда они выбирают идентификатор или описание, идентификатор объекта должен быть возвращен.

Объект выглядит примерно так:

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

В раскрывающемся меню, я хочу как 100 и George Washington появляться. Когда пользователь выбирает любой из них, я хочу вернуть 100. Любые мысли о том, как реализовать это поведение?

Answer 1

Вы можете найти одну простую реализацию на этой скрипке: https://jsfiddle.net/2j8e5ugd/

в основном вам нужно перебрать и JSON добавить данные в списке выбора.

HTML

<select id='s1'> 

</select> 

Script

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

Вы можете изменить данные, чтобы перейти к выбор2, чтобы иметь двойные элементы: первый показывая идентификатор, а второй - имя или описание, оба с тем же идентификатором.

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>