javascript cicle для дублированных значений с помощью select2 - PullRequest
Новая
       10

javascript cicle для дублированных значений с помощью select2

0 голосов
/ 15 февраля 2019

Здравствуйте, ребята, я борюсь с этой проблемой.

У меня есть html select с опциями и поле ввода для получения значений выбранных опций.

Итак, у меня есть скрипт сFOR для получения выбранных опций в этом поле ввода.

Проблема в том, что в цикле FOR записываются повторные значения.

В размещенной ссылке вы увидите проблему.

Это веб-сайт для тестирования хочу, чтобы у меня есть

Это мой код. 

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

1 Ответ

0 голосов
/ 15 февраля 2019

Вам необходимо очистить ввод с помощью input.value = '' перед циклом for перед перезаписью значений: 

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