我正在尝试将多个下拉菜单的选择复制()到一个文本框中。目前我在下面处理的代码只会复制第一个下拉列表。我希望所有四个下拉列表中的每个选择都复制到文本框中的一行中，并能够添加多个变体来创建一个列表。有什么建议么？
此外，我想尝试更进一步，让第二个和第三个下拉菜单根据之前的下拉菜单选择动态变化。前任。在下拉列表 1 中选择 Building One 会将下拉列表 2 更改为仅显示 Dept. one。这是更多的工作，所以如果有人能指出我如何集成这两个功能的正确方向，我们将不胜感激。
在此先感谢您的帮助!
function copy() {
var sel = document.getElementById("names");
var text = sel.options[sel.selectedIndex].value;
var out = document.getElementById("output");
out.value += text + "\n";
}<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
</head>
<body>
</script>
<select id="names" style="vertical-align: top;">
<option value="Building One">Building One</option>
<option value="Building Two">Building Two</option>
<option value="Building Three">Building Three</option>
<option value="Building Four">Building Four</option>
</select>
<select id="names" style="vertical-align: top;">
<option value="Dept One">Dept One</option>
<option value="Dept Two">Dept Two</option>
<option value="Dept Three">Dept Three</option>
<option value="Dept Four">Dept Four</option>
</select>
<select id="names" style="vertical-align: top;">
<option value="Folder One">Folder One</option>
<option value="Folder Two">Folder Two</option>
<option value="Folder Three">Folder Three</option>
<option value="Folder Four">Folder Four</option>
</select>
<select id="names" style="vertical-align: top;">
<option value="Read Only">Read Only</option>
<option value="Read Write">Read + Write</option>
</select>
<input type="button" onclick="copy();" value="ADD" style="vertical-align: top;">
<textarea id="output" rows="5" style="vertical-align: top;"></textarea>
</body>
</html>最佳答案
过去几周我一直在试验 AngularJS JavaScript 库，它使完成这样的任务变得非常容易。以下是使用 AngularJS 库完成此操作的方法:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="textboxController">
<select id="names" style="vertical-align: top;" ng-model="master.building">
<option value="Building One" selected>Building One</option>
<option value="Building Two">Building Two</option>
<option value="Building Three">Building Three</option>
<option value="Building Four">Building Four</option>
</select>
<select id="names" style="vertical-align: top;" ng-model="master.department">
<option value="Dept One" selected>Dept One</option>
<option value="Dept Two">Dept Two</option>
<option value="Dept Three">Dept Three</option>
<option value="Dept Four">Dept Four</option>
</select>
<select id="names" style="vertical-align: top;" ng-model="master.folder">
<option value="Folder One" selected>Folder One</option>
<option value="Folder Two">Folder Two</option>
<option value="Folder Three">Folder Three</option>
<option value="Folder Four">Folder Four</option>
</select>
<select id="names" style="vertical-align: top;" ng-model="master.read">
<option value="Read Only" selected>Read Only</option>
<option value="Read Write">Read + Write</option>
</select>
<input type="button" ng-click="copy();" value="ADD" style="vertical-align: top;">
<br />
<textarea id="output" rows="5" style="vertical-align: top;">
{{user.building}}
{{user.department}}
{{user.folder}}
{{user.read}}
</textarea>
</div>
<script>
function textboxController($scope){
$scope.master={
building: "Building One",
department: "Dept One",
folder: "Folder One",
read: "Read Only"
};
$scope.copy = function(){
$scope.user=angular.copy($scope.master);
};
}
</script>
</body>
</html>
关于javascript - 用于将多个下拉列表中的选定项目复制到文本框的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26458116/