如何在此select2表单上添加额外字段

Question

我试图通过select2下拉菜单填充更多字段.检查这个小提琴:http: //jsfiddle.net/ws3tjp5f/

我希望填充"选择额外".但具有不同的价值.

现在我可以打印id和文本,我想存储和打印另一个值"额外"

HTML:

<input type="hidden" id="test" />
<p>Selected IDs: <input type="text" id="selectedID"/></p>
<p>Selected Options: <input typ="text" id="selectedText"/></p>
<p>Selected Extra Field: <input typ="text" id="selectedExtra"/></p>

JS:

var test = $('#test');
$(test).select2({
placeholder: "Choose",
data:[
    {id:0,text:"enhancement"},
    {id:1,text:"bug"},
    {id:2,text:"duplicate"},
    {id:3,text:"invalid"},
    {id:4,text:"wontfix"}
],
width: "300px"
});

$(test).change(function() {

var theID = $(test).select2('data').id;
var theSelection = $(test).select2('data').text;
var theExtra = $(test).select2('data').text;
$('#selectedID').val(theID);
$('#selectedText').val(theSelection);
$('$selectedExtra').val(theExtra);
});

Answer 1

我为此创建了一个Js Fiddle,你也有一个关于$('$ selectedextra')的拼写错误,它应该是$('#selectedextra'),基本上我刚刚在JSON数据上添加了一个名为'extra'的新列.

    var test = $('#test');
    $(test).select2({
        placeholder: "Choose",
        data:[
            {id:0,text:"enhancement",extra:"one"},
            {id:1,text:"bug",extra:"two"},
            {id:2,text:"duplicate",extra:"three"},
            {id:3,text:"invalid",extra:"four"},
            {id:4,text:"wontfix",extra:"five"}
        ],
        width: "300px"
    });

    $(test).change(function() {

        var theID = $(test).select2('data').id;
        var theSelection = $(test).select2('data').text;
        var theExtra = $(test).select2('data').extra;

        $('#selectedID').val(theID);
        $('#selectedText').val(theSelection);
        $('#selectedExtra').val(theExtra);

    });