如何从隐藏输入中填充多选输入,反之亦然

How to fill a multi select input from a hidden input and vice versa?

本文关键字:输入 反之亦然 填充 隐藏      更新时间:2023-10-03

所以我有一个地址簿工具,我使用它来设置http://www.phpkobo.com/address_book.php.我还设置了Select2,这是一个jquery插件,可以管理多个select输入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/

通过这个线程Jquery脚本获得了一些帮助-用输入文本填充select,反之亦然

以下是按要求工作的最终产品: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());
});