在Web开发中，JavaScript是实现客户端交互逻辑的主要技术之一。文档介绍了如何使用JavaScript将下拉列表（select元素）或单选按钮（radio元素）中选中的值累加到文本框（textarea元素）中的方法。以下是实现这一功能所需掌握的关键知识点。
### 1. HTML表单元素
- **select元素**: 用于创建一个下拉列表，用户可以从其中选择一个或多个选项。
- **option元素**: 定义select元素中的每个选项。
- **textarea元素**: 用于输入多行文本，通常用于输入较大量的文本。
- **button元素**: 创建一个按钮，可以触发事件处理函数。
### 2. JavaScript基础操作
- **获取表单元素**: 通过表单元素的name属性，使用`document.forms['表单名'].elements['元素名']`来获取表单内具体的元素。
- **事件监听**: 给按钮绑定点击事件，实现用户交互。通过`onClick`属性指定事件触发时执行的JavaScript函数。
### 3. JavaScript函数
- **字符串操作**: 使用`+`操作符拼接字符串，此处用于将选中的值与文本框中原有的内容合并。
- **全局变量**: 在函数外部定义全局变量`oldvalue`用于存储文本框原有的内容，以便在累加后能够更新。
### 4. 动态修改文本框内容
- **获取选中值**: 通过`this.form.select元素名.options[this.form.select元素名.selectedIndex].value`获取当前选中的option值。
- **更新***ea**: 使用`document.getElementById('元素id').value`或`document.forms['表单名'].elements['元素名'].value`来更新文本框的值。
### 实现示例
示例代码展示了如何实现上述功能。首先定义了一个全局变量`oldvalue`，然后通过`passText`函数获取选中的值，并将其与`oldvalue`进行拼接，最后更新到文本框中，并更新`oldvalue`以备下次累加使用。
```html
<html>
<head>
<title>js将选中值添加到文本框</title>
<script language="JavaScript">
//Begin
var oldvalue = "";
function passText(passedvalue) {
if(passedvalue != "") {
var totalvalue = passedvalue + "\n" + oldvalue;
document.displayform.itemsbox.value = totalvalue;
oldvalue = document.displayform.itemsbox.value;
}
}
//End
</script>
</head>
<body>
<form name="selectform">
<select name="dropdownbox" size="1">
<option value="">请选择</option>
<option value="ASP">ASP</option>
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
<option value="***">***</option>
<option value="DELPHI">DELPHI</option>
</select>
<input type="button" value="添加到列表中" onClick="passText(this.form.dropdownbox.options[this.form.dropdownbox.selectedIndex].value);">
</form>
<form name="displayform">
<textarea cols="30" rows="5" name="itemsbox"></textarea>
</form>
</body>
</html>
```
### 实际应用
本文所提供的方法可以广泛应用于需要用户选择信息并自动记录到文本框的表单中，不仅节省用户输入时间，还能提升用户体验。例如，在一个需要填写技术偏好信息的表单中，用户可以从下拉列表中选择多个技术栈，然后一键将它们添加到一个文本框中，便于统一查看和记录。
### 扩展功能
通过上述方法的变通，我们还可以实现如文本框内容的修改、删除选中的值、基于选中项的条件判断执行不同逻辑等更多功能，从而使得JavaScript在Web页面上的动态操作更加灵活和强大。
总结来说，通过本文所介绍的JavaScript技术，开发者可以轻松实现页面元素间的互动，提升用户的交互体验，同时为Web应用注入更多动态和生命力。
