获取组合框和文本区域中的选项值接收此值以复制

Question

我是 JavaScript 初学者，我想获取选项的值，但在我当前的代码中，我获取的是它的文本内容。

我需要的示例：

用户选择选项“蓝色”-> textarea 收到值“天空是蓝色的”。然后在按钮上单击“天空是蓝色的”被复制到剪贴板。
用户选择选项“黑色”-> textarea 收到值“我喜欢这种颜色”。然后在按钮上单击“我喜欢这种颜色”被复制到剪贴板。

其他颜色也一样。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">


<script type="text/javascript" src="jquery-2.0.2.js">
</script>

</head>

<body>

<select>
<option value="Sky is blue">Blue</option>
<option value="I like this color">Black</option>
<option value="Color of my car">Red</option>
</select>

<textarea type="text" class="js-copytextarea"></textarea><button class="js-textareacopybtn" style="vertical-align:top;">COPY</button>

<script type="text/javascript">
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
    </script>
<script type="text/javascript">//<![CDATA[
$('body').on('change', 'select', function() {
$('textarea').val($(this).find(":selected").text()).select();
})
//]]></script>
</body>
</html>

Answer 1

如果您已经在大部分代码中使用 vanilla JS，则不需要 jQuery。

您可以向 select 元素添加事件侦听器并获取 change 上所选选项的值。您可以更新 textarea 的值，然后更新 select() 其内容：

select.addEventListener('change', function(e) {
  textarea.value = e.target.value;
  textarea.select();
});

查看下面的代码片段以获取工作示例：

let copyTextareaBtn = document.querySelector('.js-textareacopybtn');
let select = document.querySelector('select');
let textarea = document.querySelector('textarea');

copyTextareaBtn.addEventListener('click', function(event) {
  let copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

select.addEventListener('change', function(e) {
  textarea.value = e.target.value;
  textarea.select();
});

<select>
  <option value="">Choose a color</option>
  <option value="Sky is blue">Blue</option>
  <option value="I like this color">Black</option>
  <option value="Color of my car">Red</option>
</select>

<textarea type="text" class="js-copytextarea"></textarea>
<button class="js-textareacopybtn">COPY</button>

获取组合框和文本区域中的选项值接收此值以复制

Get option value in combobox and textarea receive this value to copy

javascript

combobox

html-select