複雑なJavascriptとHTMLの質問<select>と<textarea>

Question

たとえば、オプションが異なる複数の選択ボックスがあるとします。クリックすると、テキストエリアに転送される値が必要になります。私はイメージでそれらを表示しようとします。あなたのテキストエリアを想定し

Answer 1

可能jQueryも同様に複雑ではありません。

が、これはJS有無：

<script type="text/javascript"> 
function CopyValues(oDDL, sTargetId) { 
    var arrValues = new Array(); 
    for (var i = 0; i < oDDL.options.length; i++) { 
     var curOption = oDDL.options[i]; 
     if (curOption.selected) 
      arrValues.push(curOption.value); 
    } 
    document.getElementById(sTargetId).value = arrValues.join("\n"); 
} 
</script> 

は、このようなselectタグ内からそれをアクティブ化します。

<select multiple="multiple" onclick="CopyValues(this, 'txtData');"> 

、ユーザーがクリックすると、選択した値のドロップダウンが与えられたとテキストエリアにコピーされます。 ID：

<textarea id="txtData"></textarea> 

ライブテストケース：http://jsfiddle.net/yahavbr/UBwML/

Answer 2

は、「テキスト」のIDを持っています

（注：は、これは非常に簡単なものを作るjQuery framework、使用し、さらにダウン非jQueryのソリューションのためのセクションを参照してください。 ）：

$('select').change(function() { 
    $('#text').val($(this).find('option:selected').text()); 
}); 

これは既にテキストエリア内のテキストを置き換えます。あなたは単にそれから、（スペースで）最後にそれを追加したい場合は、次の

$('select').change(function() { 
    $('#text').val($('#text').val() + ' ' + $(this).find('option:selected').text()); 
}); 

---

ピュアJavascriptのソリューション：

var selects = document.getElementsByTagName('select'), 
    textarea = document.getElementById('text'); 
for (var i = 0, select; select = selects[i]; i++) { 
    select.selectedIndex = -1; 
    select.onchange = (function (s) { 
     return function() { 
      textarea.value += 
       ' ' + s.options[s.selectedIndex].innerHTML; 
      s.selectedIndex = -1; 
     }; 
    })(select); 
} 

デモ：なしhttp://jsfiddle.net/Gdp6p/