如何从隐藏输入填充多选输入，反之亦然？

Question

因此，我有一个使用此http://www.phpkobo.com/address_book.php设置的地址簿工具。 我还设置了Select2，它是一个jQuery插件，可管理多个选择输入https://select2.github.io/examples.html 。

因此，这个地址簿工具不允许您设置多选输入，因此我必须通过创建多选输入来设计我的方式，然后将所选输入复制到隐藏输入中。 使用以下脚本，我设法将所选项目自动复制到我所拥有的隐藏输入中。

function loopSelected()
{
  var txtSelectedValuesObj = document.getElementById('hidden_input');
  var selectedArray = new Array();
  var selObj = document.getElementById('selected_items');
  var i;
  var count = 0;
  for (i=0; i<selObj.options.length; i++) {
    if (selObj.options[i].selected) {
      selectedArray[count] = selObj.options[i].value;
      count++;
    }
  }
  txtSelectedValuesObj.value = selectedArray;
}

所以这个脚本工作得很好，但问题是，当我编辑一个条目时，我的多选输入是空的，因为所有数据都保存在隐藏的输入上。 我试图弄清楚如何用隐藏输入中已经存在的数据填充多选输入，反之亦然？

任何帮助，将不胜感激。

这是我工作的示例： https : //jsfiddle.net/akhyp/1956/

Answer 1

通过此线程获得一些帮助Jquery脚本-使用输入文本填充选择，反之亦然

这是根据需要工作的最终产品： http : //jsfiddle.net/akhyp/1966/

 $("#txt").bind('keyup' , function(e){
    var ar = $(this).val().split(",");
    $("#sel option").each(function(){
        if(ar.indexOf($(this).val()) != -1)
           $(this).attr("selected","selected");
    });
  });
$('#sel').change(function(){
    $('#txt').val($('#sel').val());
});