Как скрыть скрытый входной вал при добавлении или удалении элемента с помощью плагина select2

Question

Я использую плагин select2 и получаю значения, когда пользователь вводит минимум 3 символа. Получить данные из php как json;

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

Я хочу, чтобы хранить значение идентификаторов выбранных элементов в скрытом вводе и когда пользователь удалить любой выбранный элемент, идентификатор удаленного элемента также удалить из скрытого ввода. Например;

Когда значения val1 и val2 выбраны, как показано ниже, значение скрытого ввода (id, которое «hdn-id») изменяется, как показано ниже.

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

И когда знач1 удаляется, идентификатор этого элемента (1) удалены из скрытого ввода, как это;

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

можно хранить идентификаторы в скрытом ввода с кодом выше, но при удалении элемента я не могу удалить идентификатор из скрытого ввода , Поскольку плагин присваивает 'return false' событию onclick элемента. Я, как я думаю, передал работу с вышеуказанными кодами. Как я могу быть лучшим решением?

Answer 1

Вы можете использовать событие change для модуля select2 и написать код, который будет обновлять значение скрытого ввода.

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