根据已更改的下拉菜单填充文本区域

Question

我的问题是我正在尝试根据更改的下拉列表更新 textarea 的文本。

因此，如果更改下拉列表 1，textarea 会更新，但如果更改下拉列表 2，则会再次更新 textarea。我当前的代码如下：

<html>
<head>
  <script type="text/javascript">
    function responseText(product) {
      document.getElementById("resptext").value = document.getElementById(product).value;
    }

    function CopyToClipboard() {
      let selector = document.querySelector('#resptext')
      selector.select()
      document.execCommand('copy')
    }
  </script>
</head>
<body>
  <div style="float: left;">Dropdown 1<br />
    <select id="thingama" onClick="responseText(thingama); ">
      <option></option>
      <option value="test 1">1</option>
      <option value="test 2">2</option>
    </select>
  </div>
  <br/>
  <br/>
  <br/>
  <div style="float: left;">Dropdown 2<br />
    <select id="thingama1" onClick="responseText(thingama1); ">
      <option></option>
      <option value="test 3">3</option>
      <option value="test 4">4</option>
    </select>
  </div>
  <textarea id="resptext" style=" width: 600px;  height: 400px;"></textarea>
  <button onClick="CopyToClipboard()">Copy</button>
</body>
</html>

我认为我的问题在于我如何尝试传递变量，但我遗漏了一些我认为非常简单的东西。感谢任何帮助。

Answer 1

你的代码没有什么问题，首先你应该使用 onchange，然后你应该使用它而不是 name

<!html>
<head>
<script type="text/javascript">
function responseText(product){
  document.getElementById("resptext").value=product.value;
}
function CopyToClipboard() {

  let selector = document.querySelector('#resptext')
  selector.select()
  document.execCommand('copy')
}
</script>
</head>
<body>
<div style="float: left;">Dropdown 1<br />
<select id="thingama" onchange="responseText(this); ">
<option></option>
<option value="test 1">1</option>
<option value="test 2">2</option>
</select>
</div>
<br/>
<br/>
<br/>
<div style="float: left;">Dropdown 2<br />
<select id="thingama1" onchange="responseText(this); ">
<option></option>
<option value="test 3">3</option>
<option value="test 4">4</option>
</select>
</div>
<textarea id="resptext" style=" width: 600px;  height: 400px;"></textarea>

<button onClick="CopyToClipboard()">Copy</button>
</body>
</html>

根据已更改的下拉菜单填充文本区域

Populate textarea based on which dropdown has been changed

html

javascript

textarea

drop-down-menu