获取 combobox 中的选项值，textarea 接收此值进行复制
[英]Get option value in combobox and textarea receive this value to copy
问题描述
我是 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>
1 个解决方案
解决方案1
1 已采纳 2020-12-15 20:31:29
如果您已经在大部分代码中使用 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>
FuelUX ComboBox获得“其他”选项的价值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.