javascript - 从保管箱中选择许多项目，让它们出现在文本框中

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(', ');
}​

demo here

编辑:备案-
Array.prototype 在执行上比 [] 稍微快一些。但他们做同样的事情 :) 性能损失并不大(我在我的代码中使用 []。但我也可以向您展示稍微更快更详细的方式)。