Select2 получить текст onchange-разделить запятыми - PullRequest
Новая
       8

Select2 получить текст onchange-разделить запятыми

0 голосов
/ 15 марта 2019

Я использую select2 для получения значений в поле выбора, но моя проблема в том, что я хочу получить только первый элемент в окне выбора, игнорируя разделенный запятыми элемент, например: 

$(function() {

  $('.select2').select2({
    theme: "classic",

  }).on('change', function(e) {
    var dataselected = $.map($(".select2 option:selected"), function(el, i) {
      return $(el).text();
    });

  });
});
<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.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<select class="form-control select2" multiple="multiple">
  <option value="donut" id="first">donut-milk</option>
  <option value="orange" id="first">orange-milk</option>
</select>

Это дает: 

["donut-milk","orange-milk"]

Как мне добиться этого результата: 

["donut","orange"]

Ответы [ 2 ]

2 голосов
/ 15 марта 2019

То, что вы можете сделать, это когда вы разделите текст от "-" и получите 0-й элемент.Это означает, что после разделения у вас есть массив.

Например: 

  var dataselected = $.map($(".select2 option:selected"),function (el, i){
        var elemText = $(el).text().split('-')[0]; //like this
        return elemText;
  });
0 голосов
/ 15 марта 2019

Вы должны вернуть значение вместо текстового содержимого, использовать метод val() или использовать свойство value, чтобы получить значение. 

var dataselected = $.map($(".select2 option:selected"),function (el, i){
    return  $(el).val();
});


$(function() {

  $('.select2').select2({
    theme: "classic",

  }).on('change', function(e) {
    var dataselected = $.map($(".select2 option:selected"), function(el, i) {
      return $(el).val();
    });

    console.log(dataselected);

  });
});
<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.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<select class="form-control select2" multiple="multiple">
  <option value="donut" id="first">donut-milk</option>
  <option value="orange" id="first">orange-milk</option>
</select>

или 

var dataselected = $.map($(".select2 option:selected"),function (el, i){
    return  el.value;
});


$(function() {

  $('.select2').select2({
    theme: "classic",

  }).on('change', function(e) {
    var dataselected = $.map($(".select2 option:selected"), function(el, i) {
      return el.value;
    });

    console.log(dataselected);

  });
});
<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.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<select class="form-control select2" multiple="multiple">
  <option value="donut" id="first">donut-milk</option>
  <option value="orange" id="first">orange-milk</option>
</select>

Или просто получить значение из тега select. 

var dataselected = $(".select2").val()

Согласно jQuery docs ofval() method :

Когда первый элемент в коллекции является множественным выбором (т. Е. Элементом select с установленным атрибутом множественного числа), .val () возвращает массив, содержащийзначение каждого выбранного параметра.

К вашему сведению: id должно быть уникальным в контексте, поэтому избегайте использования дублированных идентификаторов.Для группировки используйте атрибут class.

ОБНОВЛЕНИЕ: Если вы хотите извлечь первую часть из текстового содержимого (до -), то вы можете сделать что-то вроде этогоиспользуя метод String#split. 

var dataselected = $.map($(".select2 option:selected"), function(el, i) {
  return $(el).text().split('-')[0];
  // or
  // return $(el).text().split('-').shift();
});


$(function() {

  $('.select2').select2({
    theme: "classic",

  }).on('change', function(e) {
    var dataselected = $.map($(".select2 option:selected"), function(el, i) {
      return $(el).text().split('-')[0];
      // or
      // return $(el).text().split('-').shift();
    });

    console.log(dataselected);

  });
});
<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.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<select class="form-control select2" multiple="multiple">
  <option value="donut" id="first">donut-milk</option>
  <option value="orange" id="first">orange-milk</option>
</select>
...