从 Dropbox 中选择许多项目，并让它们显示在文本框中

Select many items from dropbox & let them appear in a text box

本文关键字：显示 文本 选择 Dropbox 许多 项目      更新时间：2023-09-26

我想在下拉框中添加所选项目并将它们放在文本框中。我现在只能选择一个项目并将其放入文本框中：

网页代码： 

   <select name="ncontacts" id = "contacts" multiple="yes" onclick="ChooseContact(this)"> </select>

JS代码：

    function ChooseContact(data)
    {
      document.getElementById ("friendName").value = data.value;
    }

但是当我选择 2 个项目时，只有第一个项目写在文本框中。那么，您知道如何解决它，让它们都出现在文本框中吗？

另一种可能的解决方案是： 

function ChooseContact(list) {
    var selected = [];
    Array.prototype.forEach.call(list.options, function(option) {
        if( option.selected ) {
            selected.push(option.value);
        }     
    });
    document.getElementById('friends').value = selected.join(', ');
}​

演示在这里

编辑：记录在案 -
Array.prototype在执行方面比[]略快。但他们做同样的事情:)性能损失并不多（我在代码中使用[]，但我不妨向您展示稍微快一点更冗长的方式）。

一个可能的（基本）解决方案是这样的：

function ChooseContacts(selectElem) {
    var txtBox = document.getElementById ("friendName");
    txtBox.value = '';
    for (var i=0; i<selectElem.options.length; i++) {
        if (selectElem.options[i].selected) {
            txtBox.value += selectElem.options[i].value;
        }
    }
}

function chooseContact(fromElem, appendToElem, separator){
    separator = separator|| " ";
    var result = [];
    [].forEach.call(fromElem.options, functon(option){
            if(option.checked){
                    result.push(option.value);
            }
    });
    appendToElem.value = result.join(separator);
}
相关文章：