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

Question

我正在尝试使用 select2 下拉菜单填充更多字段。检查这个 fiddle : http://jsfiddle.net/ws3tjp5f/

我也希望填充 "Select extra"。但具有不同的值(value)。

现在我可以打印 id 和文本，我想存储和打印一个值 "extra"

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

    });