I’m a JavaScript beginner, I want to get the option’s value but in my current code I’m getting its text content.
Example of what I need:
- User selects option “Blue” -> textarea receives value “sky is blue”. Then on button click “sky is blue” is copied to clipboard.
- User selects option “Black” -> textarea receives value “I like this color”. Then on button click “I like this color” is copied to clipboard.
The same for the other color.
<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>Advertisement
Answer
If you’re already using vanilla JS for a large part of your code, you don’t need jQuery for this.
You can add an event listener to the select element and get the value of the selected option on change. You can update the textarea‘s value and then select() its content:
select.addEventListener('change', function(e) {
textarea.value = e.target.value;
textarea.select();
});
Check out the snippet below for a working example:
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>