Value as Object when selecting item in Select2

Asked

Viewed 810 times

2

The Select2 plugin works normally, the only problem is when I select the item the value put in hidden (mandatory to bring data via AJAX) is as [Object Value] and not the value specified by the formatting.

Following form:

    <form id="Teste" method="get" action="">
        <input type="hidden" id="e6" name="e6" class="select2" style="width: 600px;" />

        <input type="submit" value="Enviar" />
    </form>

Value in the input hidden after the selection:

<input type="hidden" id="e6" name="e6" class="select2 select2-offscreen" style="width: 600px;" tabindex="-1" title="" value="[object Object]">

Javascript for Select2 creation:

function formataResultado(item) {
    return item.Text;
}

function formataSelecao(item) {
    return item.Value;
}

$("#e6").select2({
    placeholder: "Selecionar fornecedor",
    minimumInputLength: 0,
    id: function(data){return {id: data.id};},
    allowClear: true,
    ajax: {
        url: "http://localhost:1396/Lista/_GetDropDownListFornecedor",
        dataType: 'jsonp',
        quietMillis: 300,
        data: function (term, page) {
            return {
                searchString: term,
                pageSize: 60,
                pageIndex: page,
            };
        },
        results: function (data, page) {
            return {results: data.results, more: (page * 60) < data.total };
        }
    },
    formatResult: formataResultado,
    formatSelection: formataSelecao,
    dropdownCssClass: "bigdrop",
    escapeMarkup: function (m) { return m; }
});

JSON returned by AJAX query made by Select2:

{"results":[{"Selected":false,"Text":"Cezar Barbara","Value":"724"},
 {"Selected":false,"Text":"Cezar Barbara","Value":"765"}],
 "total":82}

1 answer

2


Your problem is in function id:

id: function(data){return {id: data.id};},

It should not return an object, but rather the value itself to be assigned to the hidden field (which by the way is Value, nay id):

id: function(data){return data.Value;},

Probably the previous function referred to some older version of Select2 (this explains its [object Object] - because this is the standard representation in string of any object, and as its function id was returning an object...).

Example in jsFiddle (adapted). By the way, doing so you are free to show a user-friendly value in its function formataSelecao, no need to display the Value onscreen.

  • Thanks for the answer, I’ll take a look. When the pagination is correct, the control is in the server.

  • 1

    Solved, I had already returned the value with the same idea that you proposed, but it was in the old version and gave problem. After upgrading it worked as expected (3.5.++). Thanks for the help. Remove the part about paging for a next user with doubts don’t make the wrong paging error. The data: data.total is a custom field of my json. Off: I joined your blog and didn’t find any topics, you disabled them or started?

  • @Trxplz0 I haven’t even started... : P

  • And will? haeuaheuaheuaheu

  • @Trxplz0 hahaha let’s see... (you may notice that I haven’t touched it for so long that the safety certificate EXPIRED!) I have a few drafts started but not finished, any time I publish them. : D

Browser other questions tagged

You are not signed in. Login or sign up in order to post.