Question

我正在尝试将多个下拉菜单的选择复制（）到文本框中。目前我在下面编写的代码只会复制第一个下拉列表。我希望将所有四个下拉列表中的每个选项复制到文本框中的一行，并能够添加多个变体来创建列表。有什么建议？

此外，我想尝试更进一步，并根据之前的下拉选择动态更改第二个和第三个下拉列表。防爆。在下拉列表中选择Building One将更改下拉列表2以仅显示Dept. one。这是一个更多的工作，所以如果有人能指出我正确的方向如何集成这两个功能非常感谢。

先谢谢你的帮助！

＆＃13;

        function copy() {
          var sel = document.getElementById("names");
          var text = sel.options[sel.selectedIndex].value;
          var out = document.getElementById("output");
          out.value += text + "\n";
        }

＆＃13;

<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>

＆＃13;

Answer 1

过去几周我一直在尝试使用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>

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

1 个答案: