Question

我想在下拉框中添加所选项目并将其放在文本框中。我现在可以选择一个项目＆amp;把它放在文本框中：

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比[]略快。但他们做同样的事情:)性能损失不是那么多（我在我的代码中使用[]。但我也可以向你展示稍微快一点的冗长方式。）

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

从dropbox＆amp; amp;中选择许多项目。让它们出现在文本框中

3 个答案: