时间戳

首页 > 解决方案 > 如何从输入标签中的单个选择选项中显示每个选定的值

javascript - 如何从输入标签中的单个选择选项中显示每个选定的值

问题描述

我是 javascript 新手，我想使用 select 选项列出输入标记中的每个选定值。

我曾尝试使用 javascript 来显示选定的值，但是当我第二次选择第一个值时，会关闭并显示第二个选定的值。我应该在输入标签中分别显示每个选定的值，而不会忽略其他先前选择的值。

function getSelectedValue() {
  var selectedValue = document.getElementById("list").value;
  document.getElementById("myValues").innerHTML = selectedValue;
}
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
  <option value="Option4">Option4</option>
</select>
<input type="text" name="value[]" id="myValue" value="">

我期望的输出
<input type="text" name="value[]" id="myValue" value="Option1">
<input type="text" name="value[]" id="myValue" value="Option3">

因此在输入中应该显示

选项1 选项3

标签： javascripthtml

解决方案

我不知道您真正期望什么，但我认为此解决方案可能对您有所帮助。签出片段。

首先获取值，然后附加到现有值

function getSelectedValue() {
  var selectedValue = document.getElementById("list").value;
  var _optionSelected = document.getElementById("myValue").value; 
  _optionSelected.length ? document.getElementById("myValue").value += ', '+selectedValue : document.getElementById("myValue").value += selectedValue;
  
}
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
  <option value="Option4">Option4</option>
</select>
<input type="text" name="value[]" id="myValue" value="">

推荐阅读