gpt4 book ai didi

javascript - 用于将多个下拉列表中的选定项目复制到文本框的按钮

转载 作者:行者123 更新时间:2023-11-30 17:14:04 25 4
gpt4 key购买 nike

我正在尝试将多个下拉菜单的选择复制()到一个文本框中。目前我在下面处理的代码只会复制第一个下拉列表。我希望所有四个下拉列表中的每个选择都复制到文本框中的一行中,并能够添加多个变体来创建一个列表。有什么建议么?

此外,我想尝试更进一步,让第二个和第三个下拉菜单根据之前的下拉菜单选择动态变化。前任。在下拉列表 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com