javascript - 从 Dropbox 中选择许多项目并让它们出现在文本框中

Question

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

html代码：

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

JS代码：

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

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

Answer 1

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

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比[]执行速度略快。但是他们做同样的事情 :) 性能损失并不多（我[]在我的代码中使用。但我不妨向您展示稍微更快更详细的方式）。

Answer 2

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

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

Answer 3

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