복잡한 자바 스크립트 및 HTML 질문 <select> 및 <textarea>

Question

다른 옵션이있는 옵션이있는 선택 상자가 여러 개 있다고 가정 해 보겠습니다. 클릭 할 때 텍스트 영역으로 전송할 값을 원합니다. 나는 그들을 이미지로 보여 주려고 노력할 것이다. 당신의 텍스트 영역을 가정

Answer 1

가능 jQuery도 복잡하지 않습니다.

<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');"> 

그리고 때마다 사용자 선택된 값 드롭 다운을 클릭 주어진와 텍스트 영역에 복사됩니다

는이 JS 되세요 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()); 
}); 

---

순수 자바 스크립트 솔루션 :

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/