I have a select2 (jQuery plugin) on my code which works normally except for the case when I select an item.

The value is wrong.

Form:

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

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

Input from select2 - hidden (required for remote data) - value: [Object]:

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

Javascript used for instance select2:

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

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

        $("#e6").select2({
            placeholder: "Select your supplier",
            minimumInputLength: 0,
            id: function(data){return {id: data.id};},
            allowClear: true,
            ajax: {
                url: "http://localhost:1396/List/_GetDropDownListSupplier",
                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: formatRes,
            formatSelection: formatSel,
            dropdownCssClass: "bigdrop",
            escapeMarkup: function (m) { return m; }
        });

Json example returned by ajax to Select2:

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

I have a select2 (jQuery plugin) on my code which works normally except for the case when I select an item.

The value is wrong.

Form:

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

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

Input from select2 - hidden (required for remote data) - value: [Object]:

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

Javascript used for instance select2:

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

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

        $("#e6").select2({
            placeholder: "Select your supplier",
            minimumInputLength: 0,
            id: function(data){return {id: data.id};},
            allowClear: true,
            ajax: {
                url: "http://localhost:1396/List/_GetDropDownListSupplier",
                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: formatRes,
            formatSelection: formatSel,
            dropdownCssClass: "bigdrop",
            escapeMarkup: function (m) { return m; }
        });

Json example returned by ajax to Select2:

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

• javascript
• jquery
• asp-mvc
• jquery-select2

• Why are guys down vote a legitimate question? – Trxplz0 Commented Jul 24, 2014 at 15:04

2 Answers 2

Solved:

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

I was returning a object with id and not a directly value.

Thanks to @mgibsonbr from Stackoverflow PT

You need to use a select element, try this:

<form>
    ...
    <select id="someSelect">
        //options
    </select>
    <input type="hidden" name="fromSelect" id="fromSelect" value=""/>
</form>

You have two options here:

1.- Get the value direct from select:

var selected = $('#someSelect').val();

2.- Assign the value to the hidden input and then get its value:

$('#someSelect').on('change', function(){
    $('#fromSelect').attr('value', this.value);
});

var selected = $('#fromSelect').val();