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

Question

我使用select2插件并在用户输入至少3个字符时获取值。像这样以json的形式从php获取数据;

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

我想将所选项目的id值存储在隐藏输入中，当用户删除任何选定项目时，已删除项目的ID也会从隐藏输入中删除。例如;

当如下选择val1和val2项时，隐藏输入的值（'hdn-id'的id）也会如下变化。

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

当删除val1时，此项目（1）的id从隐藏的输入中移除，如此;

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

但我不能这样做。我的代码;

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" />

我可以使用上面的代码将ID存储在隐藏的输入中，但是当删除项目时，我无法从隐藏的输入中删除id。因为插件为元素的onclick事件指定'return false'。我认为我用上述代码递交了这份工作。我怎样才能成为更好的解决方案呢？

Answer 1

您可以使用select2插件的change事件，并编写一些代码来更新隐藏输入的值。

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