使用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刪除時，此項的ID（1）的ID從這樣的隱藏輸入中刪除；

<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
    });