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

Question

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

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

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

当像下面这样选择 val1 和 val2 项时，隐藏输入的值(id 'hdn-id')也会像下面一样改变。

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

当 val1 被删除时，该项目的 id (1) 从隐藏输入中删除，如下所示；

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

但我做不到。我的代码；

选择2:

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。因为插件将“return false”分配给元素的 onclick 事件。我想，我用上面的代码交了这份工作。我怎样才能成为更好的解决方案？

Answer 1

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

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