Select2 获取文本 onchange - 逗号分隔

Question

我使用 select2 获取 select 框中的值，但我的问题是，我只想获取 select 框中的第一项忽略像这样的逗号分隔项：

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

Answer 1

您必须return值而不是文本内容，使用val() method or use 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 of val() method：

When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set), .val() returns an array containing the value of each selected option.

仅供参考： id 在上下文中应该是唯一的，因此避免使用重复的 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>

Answer 2

您可以做的是当您将文本从“-”中拆分出来并获得第 0 个元素时。这意味着在你分裂之后你有一个数组。

举个例子：

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

Select2 获取文本 onchange - 逗号分隔

Select2 get text onchange -comma seperated

javascript

jquery-select2