2

選択した項目をドロップダウン ボックスに追加し、それらをテキスト ボックスに配置したいと考えています。アイテムを 1 つだけ選択して、テキスト ボックスに入れることができるようになりました。

HTML コード:

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

JS コード:

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

しかし、2 つの項目を選択すると、最初の項目だけがテキスト ボックスに書き込まれます。では、両方をテキストボックスに表示するにはどうすれば修正できるか知っていますか?

4

3 に答える 3

3

別の可能な解決策は次のとおりです。

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よりもわずかに高速です。[]しかし、彼らは同じことをします:)パフォーマンスのペナルティはそれほど大きくありません（私[]はコードで使用していますが、少し速く、より冗長な方法を示すこともできます）。

于 2012-05-11T22:50:47.780 に答える
2 
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);
}
于 2012-05-11T22:51:56.897 に答える
2

考えられる (基本的な) 解決策の 1 つとして、次のようなものがあります。

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;
        }
    }
}
于 2012-04-26T19:33:17.100 に答える