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 autoplete 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?

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 autoplete 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?

• javascript
• jquery
• html
• drop-down-menu

• Set the "value" attribute of one select to that of another with document.getElementById('[select element1]').value = document.getElementById('[select element2]').value; – Feathercrown Commented May 5, 2016 at 13:44
• It's not always the same just sometimes when the user decides to – dfmetro Commented May 5, 2016 at 13:55
• The way to go is to use datalist as suggested in answer below even this answer is quite unplete e.g jsfiddle/wkzr1q8t – A. Wolff Commented May 5, 2016 at 13:57
• @devc2 Then use it in the onClick handler for a button. – Feathercrown Commented May 5, 2016 at 13:58
• @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 Commented May 5, 2016 at 14:14

7 Answers 7

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!

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./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>

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./tags/tag_datalist.asp

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.

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);

See the datalist element: http://www.w3schools./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.

<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>