Question

我知道这是一个愚蠢的问题，但我是Javascript的新手。

我有以下列表框：

<select id = 'data' multiple='multiple'>
    <option>test@email.com</option>
    <option>test@email.com</option>
    <option>test@email.com</option>
    <option>test@email.com</option>
    <option>test@email.com</option>
 </select>

在列表框下面有一个textarea：

<textarea id = 'copydata'>
</textarea>

在textarea下面是一个按钮：

<button id = 'add'>add email</button>

我想知道当用户使用Javascript按下按钮时是否可以将列表框中选中的项目复制到textarea。

请注意，列表框具有multiple属性，因此用户可以选择多个项目。

非常感谢任何帮助。

Answer 1

是的，有可能，你应该使用jQuery来简化它：

$("#add").click(function(){ // This event fires when you click the add button
    $("#data option:selected").each(function(){ // Loop through each selected option
        $("#copydata").val($("#copydata").val() + $(this).text() + "\n"); // Add its innerhtml to the textarea
    });
});

Answer 2

以下是使用核心HTML和Javascript的解决方案。

<html>
<head>
<script type="text/javascript">

function copyDataToTextArea() {
   var _data = document.getElementById("data");
   var _textArea = document.getElementById("copydata");
   var _selectedData="";

   for(i=0; i<document.getElementById("data").length; i++) {
	   var _listElement = document.getElementById("data")[i];
	   if(_listElement.selected) {
	      _selectedData = _selectedData + _listElement.value + "\n";
	   }
   }
   _textArea.value=_selectedData;
}
</script>
</head>
<body>
    <select id='data' multiple='multiple'>
       <option>test1@email.com</option>
       <option>test2@email.com</option>
       <option>test3@email.com</option>
       <option>test4@email.com</option>
       <option>test5@email.com</option>
 </select>
 
 <textarea id='copydata'>
 </textarea>

 <button id ='add' onclick="copyDataToTextArea()" >add email</button>
</body>
</html>

Javascript |将所选项目从列表框复制到textarea

2 个答案: