CODEWITHSUNDEEP
javascriptjqueryjquery-select2
rui_sonika
rui_sonika

Reputation: 45

javascript cicle for duplicated values with select2

Hello guys i'm struggling with this problem.

I have html select with options and a input field to receive the values of the selected options.

So i have a script with FOR to get the options selected, in that input field.

The issue is that in the FOR cicle it writtes repeated values.

In the link posted you will see the problem.

This is the website for testing want i have

This is my code.

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

Upvotes: 0

Views: 65

Answers (1)

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

You need to empty the input with input.value = '' before the for loop before rewriting the values :

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

Upvotes: 1

Related Questions