Question

0

213

Views

Copy text/data from drop down menu when user click button using javascript?

function myFunction() {
  var copyText = document.getElementById("1");
  var copyText = document.getElementById("2");
  copyText.select();

  navigator.clipboard.writeText(copyText.value);

  alert("Copied the text: " + copyText.value);
}

<select id="1">
  <option>Apple</option>
  <option>Carrot</option>
</select>
<select id="2">
  <option>Fruit</option>
  <option>Vegetable</option>
</select>

<button onclick="myFunction()">Copy text</button>

When Apple and Fruit is selected in the drop down, and click Copy text button, my clipboard will have "Apple/Fruit"

I can't figure it out. Please help.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-01T05:01:27.109Z

Let's start with what's wrong:

you are reusing the same variable copyText for both elements, hens only the last element will be available in that variable.
as the error shows, element select (which is delcared into copyText variable) doesn't have function select()
you are trying copy to clipboard a value from a single element

So, to minimally fix your code you'll need declare two different variables for your elements, and combine values from both into one:

function myFunction() {
  var copyText1 = document.getElementById("1");
  var copyText2 = document.getElementById("2");

  var value = copyText1.value + "/" + copyText2.value;
  navigator.clipboard.writeText(value);

  alert("Copied the text: " + value);
}

<select id="1">
     <option>Apple</option>
     <option>Carrot</option>
</select>
<select id="2">
     <option>Fruit</option>
     <option>Vegetable</option>
</select>

<button onclick="myFunction()">Copy text</button>

0

213

Copy text/data from drop down menu when user click button using javascript?

1 answers

0

Find remote jobs

Andres GPT