如何将 html 选择的选定值复制并粘贴到其他选择答案

【问题标题】：How to copy and paste an html select selected value to other selects如何将 html 选择的选定值复制并粘贴到其他选择
【发布时间】：2016-05-05 13:38:47
【问题描述】：

我开发了一个网站，在同一表单中包含多个 select 元素

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

页面上有 8 个选项完全相同的选项。

用户想要将select 的选定值从一个复制粘贴到另一个。

最终用户使用 Ctrl+C、Ctrl+V 启动它。编写 Web 应用程序是为了替换允许最终用户复制和粘贴的 excel 应用程序

但是 html select 不支持复制和粘贴。 (Ctrl+C, Ctrl+V)

我能做什么？

任何插件可以做到这一点？任何最小的自动完成选择建议看起来像标准的select？

编辑：

使用 datalist 示例可能是一个解决方案。唯一的问题是它允许输入无效文本，即不是选择选项之一的文本（除了没有）。我如何只允许有效文本？

【问题讨论】：

使用 document.getElementById('[select element1]').value = document.getElementById('[select element2]').value; 将一个 select 的“value”属性设置为另一个 select 的属性。
有时当用户决定这样做时并不总是一样
要走的路是使用下面答案中建议的数据列表，即使这个答案很不完整，例如jsfiddle.net/wkzr1q8t
@devc2 然后在按钮的 onClick 处理程序中使用它。
@A.Wolff 确实符合我的需要，只是它允许在此处输入和保留无效文本。理想情况下，如果用户离开输入并且文本不是选项之一（除了空白），它应该返回默认值，即空白

标签： javascript jquery html drop-down-menu

【解决方案1】：

在Copy selected item's text from select control html 问题中查看@Hashbrown 的答案。当然它会对您有所帮助，因为它部分符合您的问题。

您也可以查看How do I copy to the clipboard in JavaScript?，因为它有很多与您的问题相关的信息。

祝你好运！

【讨论】：

【解决方案2】：

您应该使用datalist 并按如下方式处理无效输入：

$('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>

【讨论】：

有没有办法让它使用与显示值不同的值，例如jsfiddle.net/wkzr1q8t/7我会先尝试以下，因为它似乎在一个单独的问题中得到了回答stackoverflow.com/questions/29882361/…
您的预期行为是什么？我不确定会得到它
它必须在输入中显示Apple而不是1。我会尝试stackoverflow.com/questions/29882361/…中提到的答案
但是那里出了什么问题：jsfiddle.net/wkzr1q8t/8 不设置值属性使文本成为值
我必须将表单发布到服务器并获取数值，例如1 而不是显示值，例如苹果。我可以在服务器上反向翻译它，所以你的答案是正确的。

【解决方案3】：

尝试使用数据列表

 <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

【讨论】：

我尝试了一个 jsfiddle 但它没有用。当用户单击它以立即调出选择列表时，我还需要这样做

【解决方案4】：

将一个选择的“值”属性设置为另一个选择的属性

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

如果需要，您可以将其放入按钮的 onClick 处理程序中。

【讨论】：

这是一个解决方案吗？这将只是设置值...不知道这将如何帮助！
@Rayon 根据我对问题的理解，OP希望将一个值设置为另一个值。
最终用户使用Ctrl+C、Ctrl+V启动。编写 Web 应用程序是为了替换允许最终用户复制和粘贴的 excel 应用程序

【解决方案5】：

试试这个代码

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

【讨论】：

【解决方案6】：

查看数据列表元素：http://www.w3schools.com/tags/tag_datalist.asp

它是这样使用的：

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

输入元素的列表属性告诉输入元素使用具有该id的数据列表。

【讨论】：

【解决方案7】：

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

【讨论】：