使用select2插件添加或删除项目时如何更改隐藏的输入值

Question

I use select2 plugin and get values when user typing least 3 character. Get data from php as json like this;

"1":"val1"  ,  "5":"val2"  ,  "19":"val3"....

I want to store id values of selected items at hidden input and when user remove any selected item, the id of removed item also remove from hidden input. For example;

When val1 and val2 items are selected like below, value of hidden input (id which 'hdn-id') change like below, also.

<input type="hidden" id="hdn-id" val="1,5" />

And when val1 is removed, id of this item (1) removed from hidden input like this ;

<input type="hidden" id="hdn-id" val="5" />

But I can't do this. My codes;

SELECT2:

function selectAjax(element,url,hiddenElement) {

var selectedItemsArray = []
$('#'+element).select2({

    multiple: multi,

    id: function(element) {
        return element
    },

    ajax: {
        url: url,
        dataType: 'json',
        data: function(term,page) {
            return {
                term: term,
                page_limit: 10
            };                        
        },
        results: function(data,page) {
            var titleArr    = [];
            $.each(data, function(k,v){
               titleArr.push(k+':'+v);
            });

            return {
                results: titleArr
            };
        }
    },

    formatResult: formatResult,
    formatSelection: formatSelection,

});

function formatResult(data) {
   return '<div>'+data.substr(data.indexOf(':')+1)+'</div>'
};

function formatSelection(data) {

    var id   = data.split(':',1),
        text = data.substr(data.indexOf(':')+1),                    
        hiddenElementValue = eval([jQuery('#'+hiddenElement).val()]);
        selectedItemsArray.push(id);
        jQuery('#'+hiddenElement).val(selectedItemsArray);

    return '<div data-id="'+id+'" class="y-select2-selected-items">'+text+'</div>';        
};


}


selectAjax('select2-element','ajx.php','hdn-id');

HTML:

<input type="text" id="select2-element" />
<input type="hidden" id="hdn-id" />

I can store ids at hidden input with above code but when remove an item I can't remove id from hidden input. Because plugin assign 'return false' to element's onclick event. I handed the job with above codes, I think.How can I be a better solution?

Answer 1

You can use the change event of the select2 plugin and there write some code that will update the value of the hidden input.

    $("#select2-item").select2({
        //options go here
    });
    $("#select2-item").on("change", function(e) { 
        //update hidden input value
    });