Question

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

Answer 1

您可以使用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>

Answer 2

您可以将具有选定值的新输入添加到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>

Answer 3

如果要使用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>

Answer 4

我不知道您的真正期望，但我认为此解决方案可能对您有所帮助。检出摘要。

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

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

Answer 5

我不能完全确定我对您有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="">

如何显示输入标签

5 个答案: