How to copy and paste an html select selected value to other selects

Question

I have developed a site with multiple select elements in the same form

<select>
  <option value="">Select ...</option>
  <option value="1">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Carrot</option>
  <option value="4">Orange</option>
  <option value="5">Pear</option>
</select>

There are 8 selects with the exact same options on the page.

The user wants to copy and paste the selected values of a select from one to another.

The end user initiates it by using Ctrl+C, Ctrl+V. The web app was written to replace an excel app which allows copy and paste by the end user

However an html select doesn't support copy and paste. (Ctrl+C, Ctrl+V)

What can I do?

Any plugin that can maybe do this? Any minimal autocomplete select to suggest that looks like the standard select?

Edit:

Using the datalist example can be a solution. Only problem is that it allows invalid text i.e. text that is not one of the select options (apart from nothing) to be typed in. How do I only allow valid text?

Set the "value" attribute of one select to that of another with document.getElementById('[select element1]').value = document.getElementById('[select element2]').value; — Feathercrown, May 05 '16 at 13:44
It's not always the same just sometimes when the user decides to — dfmetro, May 05 '16 at 13:55
The way to go is to use datalist as suggested in answer below even this answer is quite uncomplete e.g https://jsfiddle.net/wkzr1q8t/ — A. Wolff, May 05 '16 at 13:57
@A.Wolff that does suit my needs except that it allows invalid text to be entered and left there. Ideally if the user leaves the input and the text is not one of the options (apart from blank) it should go back to default i.e. blank — dfmetro, May 05 '16 at 14:14
This could be a solution https://jsfiddle.net/wkzr1q8t/1/ Now if you want to still let user type in input, this needs more work or use blur/change event instead https://jsfiddle.net/wkzr1q8t/2/ — A. Wolff, May 05 '16 at 14:17
Thank @A.Wolff. That works. Put your jsfiddle in an answer and I'll mark it the solution — dfmetro, May 05 '16 at 14:19

score 2 · Answer 1 · edited May 23 '17 at 11:59

2

See @Hashbrown answer in Copy selected item's text from select control html question. Sure it would help you as it's partially match your question.

Also you can take a look on How do I copy to the clipboard in JavaScript? as it has a lot of info related to your question.

Good Luck!

edited May 23 '17 at 11:59

Community

1
1

answered May 05 '16 at 13:50

Andriy Ivaneyko

15,838
3
43
65

score 1 · Answer 2 · answered May 05 '16 at 13:49

1

Try using datalist

 <input list="foods" name="food">
    <datalist id='food'>
      <option value="1">Select ...</option>
      <option value="1">Apple</option>
      <option value="2">Banana</option>
      <option value="3">Carrot</option>
      <option value="4">Orange</option>
      <option value="5">Pear</option>
    </datalist>

http://www.w3schools.com/tags/tag_datalist.asp

answered May 05 '16 at 13:49

Himanshu Tanwar

866
5
16

I tried a jsfiddle but it didn't work. I need to also when the user clicks on it to bring up the select list immediately – dfmetro May 05 '16 at 14:01

score 1 · Accepted Answer · answered May 05 '16 at 14:21

1

You should use datalist and handle none valid input as follow:

$('input[list]').on('change', function() {
  var options = $('option', this.list).map(function() {
    return this.value
  }).get();
  if (options.indexOf(this.value) === -1) {
    this.value = "";
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="food1" name="food1" placeholder="Select...">
<datalist id='food1'>
  <option disabled>Select ...</option>
  <option value="Apple">Apple</option>
  <option value="Banana">Banana</option>
  <option value="Carrot">Carrot</option>
  <option value="Orange">Orange</option>
  <option value="Pear">Pear</option>
</datalist>
<input list="food2" name="food2" placeholder="Select...">
<datalist id='food2'>
  <option value="Apple">Apple</option>
  <option value="Banana">Banana</option>
  <option value="Carrot">Carrot</option>
  <option value="Orange">Orange</option>
  <option value="Pear">Pear</option>
</datalist>

answered May 05 '16 at 14:21

A. Wolff

72,298
9
84
139

Is there a way for it to work with a different value than display value e.g. https://jsfiddle.net/wkzr1q8t/7/ I'll try the following first as it seems to be answered in a separate question http://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value – dfmetro May 05 '16 at 15:08
What is your expected behaviour? I'm not sure to get it – A. Wolff May 05 '16 at 15:12
It must show Apple in the input and not 1. I'll try the answer mentioned in http://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value – dfmetro May 05 '16 at 15:13
But then what's wrong there: https://jsfiddle.net/wkzr1q8t/8/ Not setting value attribute makes text the value – A. Wolff May 05 '16 at 15:16
I have to post the form to the server and get the numeric value e.g. 1 and not the display value e.g. Apple. I could reverse translate it on the server so your answer is correct. – dfmetro May 05 '16 at 15:22

score 0 · Answer 4 · answered May 05 '16 at 13:46

0

Set the "value" attribute of one select to that of another with

document.getElementById('[select element1]').value = document.getElementById('[select element2]').value;

You can put this in the onClick handler for a button if you want.

answered May 05 '16 at 13:46

Feathercrown

1,886
1
13
23

1

Is this a solution ? This will just set value...Not sure how will this help! – Rayon May 05 '16 at 13:47
@Rayon The OP wants to set the value of one to the value of another, by my understanding of the question. – Feathercrown May 05 '16 at 13:49
The end user initiates it by using Ctrl+C, Ctrl+V. The web app was written to replace an excel app which allows copy and paste by the end user – dfmetro May 05 '16 at 14:06

score 0 · Answer 5 · answered May 05 '16 at 14:04

Try this code

 var src=document.getElementById('src');
    var des=document.getElementById("des");
    var opt=document.createElement("Option");
    opt.value = src.options[src.selectedIndex].value;
    opt.text =  src.options[src.selectedIndex].text;
    des.options.add(opt);

score 0 · Answer 6 · answered May 05 '16 at 14:19

See the datalist element: http://www.w3schools.com/tags/tag_datalist.asp

It is used like this:

<input list="browsers" name="browserselect" type="text"/>

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

The list attribute of the input element tells the input element to use the datalist with that id.

score 0 · Answer 7 · answered Dec 18 '20 at 12:41

<select name="a" id="a">
    <option value="1">abc</option>
</select>


<select name="b" id="b">
    <option value=""></option>
</select>

<script type="text/javascript">
$('select#a').on('change',function(){
    var v = $(this).val();
    $('select#b').val(v);
});
</script>

How to copy and paste an html select selected value to other selects

7 Answers7