使用 select2 进行重复值的 JavaScript 循环

Question

大家好，我正在努力解决这个问题。

我有带有选项的 html 选择和一个输入字段来接收所选选项的值。

所以我有一个带有 FOR 的脚本来在该输入字段中选择选项。

问题在于 FOR cicle 中写入了重复的值。

在发布的链接中您将看到问题。

This is the website for testing want i have

这是我的代码。

$(document).ready(function() {
  $('.js-example-basic-multiple').select2();
  allowClear: true
});

function getSelectedOptions(sel) {
  var opts = [],
    opt;
  var len = sel.options.length;
  var input = document.getElementById("inputId1");
  for (var i = 0; i < len; i++) {
    opt = sel.options[i];
    if (opt.selected) {
      input.value += opt.value + ",";
      //alert(opt.value);
    }
  }
  //return opts;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
  <div class="row space-top">
    <div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <select id="selectedOptions" class="js-example-basic-multiple" name="colaboradores[]" multiple="multiple" style="width:100% !important;" onchange="getSelectedOptions(this)">
        <option value="U1">User 1</option>
        <option value="U2">User 2</option>
        <option value="U3">User 3</option>
        <option value="G1">Grupo 1</option>
        <option value="G2">Grupo 2</option>
        <option value="G3">Grupo 3</option>
      </select>
    </div>
  </div>
  <div class="row space-top">
    <div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="form-group">
        <label for="inputId1">Valores recebidos do select 2</label>
        <input type="text" class="form-control" id="inputId1" aria-describedby="peqDesc">
        <small id="peqDesc" class="form-text text-muted">Estas são as variáveis que recebo do select 2</small>
      </div>
    </div>
  </div>
</div>

Answer 1

在重写值之前，您需要在 for 循环之前使用 input.value = '' 清空输入:

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

function getSelectedOptions(sel) {
  var opts = [],
    opt;
  var len = sel.options.length;
  var input = document.getElementById("inputId1");
  input.value = ''
  for (var i = 0; i < len; i++) {
    opt = sel.options[i];
    if (opt.selected) {
      input.value += opt.value + ",";
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
  <div class="row space-top">
    <div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <select id="selectedOptions" class="js-example-basic-multiple" name="colaboradores[]" multiple="multiple" style="width:100% !important;" onchange="getSelectedOptions(this)">
        <option value="U1">User 1</option>
        <option value="U2">User 2</option>
        <option value="U3">User 3</option>
        <option value="G1">Grupo 1</option>
        <option value="G2">Grupo 2</option>
        <option value="G3">Grupo 3</option>
      </select>
    </div>
  </div>
  <div class="row space-top">
    <div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="form-group">
        <label for="inputId1">Valores recebidos do select 2</label>
        <input type="text" class="form-control" id="inputId1" aria-describedby="peqDesc">
        <small id="peqDesc" class="form-text text-muted">Estas são as variáveis que recebo do select 2</small>
      </div>
    </div>
  </div>
</div>