I am trying to get more field filled with a select2 drop-down menu. Check this fiddle: /

I want the "Select extra" to be populated too. But with a different value.

Now I can print id & text, I want to store and print one more value "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);
});

I am trying to get more field filled with a select2 drop-down menu. Check this fiddle: http://jsfiddle/ws3tjp5f/

I want the "Select extra" to be populated too. But with a different value.

Now I can print id & text, I want to store and print one more value "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);
});

• javascript
• jquery
• html
• jquery-select2

• Im using php and JSON in my actual code. – user3801032 Commented Aug 13, 2014 at 9:52

2 Answers 2

I created a Js Fiddle for this, you also have a typo on $('$selectedextra'), it should be $('#selectedextra'), basically i just added a new column on the JSON data called '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);

    });

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

this line

$('#selectedExtra').val(theExtra);