我的问题是我正在尝试根据更改的下拉列表来更新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>
我认为我的问题在于如何尝试传递变量,但是我缺少一些我认为会非常简单的东西。任何帮助表示赞赏。
答案 0 :(得分:0)
您的代码几乎没有问题,首先应使用onchange,然后应使用它代替名称
<!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>