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

 收藏

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

I expected the output of
<input type="text" name="value[]" id="myValue" value="Option1">
<input type="text" name="value[]" id="myValue" value="Option3">

因此在输入中应显示

选项1   选项3
回复
  • et_ea 回复

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

  • miste 回复

    您可以使用选定的值向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>

  • 三叔公 回复

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

  • qfugit 回复

    You can use Select2 jQuery plugin for that.

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

  • DJHongKong 回复

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

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

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