devc2 devc2 - 6 months ago 43
HTML Question

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

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?

Answer

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>

Comments