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

【问题标题】：How to show each of the selected value from single select option in input tag如何从输入标签中的单个选择选项中显示每个选定的值
【发布时间】：2019-05-30 06:36:55
【问题描述】：

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

【问题讨论】：

我认为使用 jquery 更容易。
您使用的是...innerHTML = selectedValue;，因此理论上替换了内容。将= 替换为+=，您将改为追加。但是，您要么想使用 .value（因为这是一个输入），要么如果它应该是只读的，请改用 <p> 或 <span>。

标签： javascript html

【解决方案1】：

如果你想使用 Jquery，你可以这样做。

function getSelectedValue() {
  var selectedValue = document.getElementById("list").value;
  
  if(selectedValue) {
  
  var html ='<input type="text" name="value[]" id="myValue" value="'+selectedValue+'"> <br>';
  
  $('.inp').append(html);
  $('.default').remove();
    
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<div class="inp">
<input type="text" name="value[]" id="myValue" value="" class="default">
</div>

【讨论】：

如果他想删除一个选择怎么办？
然后需要提供删除选项。

【解决方案2】：

我不知道您真正期望什么，但我认为此解决方案可能对您有所帮助。查看 sn-p。

先获取值，再追加到已有值

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

【讨论】：

你说“我不知道你真正期望什么”然后你告诉我我不正确。如果你不知道，为什么你告诉我它不正确
@Andam 可能是他期望在单个输入框中输入标签，您的答案是在 div 中列出项目。检查问题，他需要在输入框内，而不是 div。我的答案在输入框中显示结果而不是 div
再次，错误的答案。这不考虑删除选择，而且它允许将相同的选项添加两次。
谢谢，但我希望选择的每个选项都出现在其输入中，而不是单个输入中。

【解决方案3】：

我不完全确定我是否 100% 了解您，但如果我认为您希望能够在输入框中看到所有选定的值？你选择的，永远！如果是这样：

var values = []

function getSelectedValue() {
  var selectedValue = document.getElementById("list").value;
  if (values.indexOf(selectedValue) === -1) { //prevents duplicate values
    values.push(selectedValue)
  }
  document.getElementById("myValues").setAttribute('value', values.join(' '))
}

<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="myValues" value="">

【讨论】：

【解决方案4】：

您可以为此使用Select2 jQuery 插件。

$(document).ready(function() {
        $('.js-example-basic-multiple').select2({
    width: '100%'
});
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<select class="js-example-basic-multiple" name="options[]" multiple="multiple">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>

【讨论】：

【解决方案5】：

您可以使用所选值向 div 添加新输入

var selectedValues = [];
function getSelectedValue() {
  var selectedValue = document.getElementById("list").value;
  if( !selectedValues.includes(selectedValue) ){
    selectedValues.push(selectedValue);
    
    document.getElementById("myValues").innerHTML += 
    '<input type="text" name="value[]" id="myValue" value="' + selectedValue + '"></br>';
  }
}

<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>
<div id="myValues">
</div>

【讨论】：

这不是正确答案，请在发布答案之前阅读问题。错误的答案将被否决
@AkhilAravind 这就是我对这个问题的理解。
@AkhilAravind 我认为他可以决定它是否是正确答案
您的回答非常错误，我们不能在文档中使用相同的 ID，这是一种不好的做法
没有删除选择的选项，答案不完整。