Блог

Главная - Вопросы по программированию - Как разделить данные val запятой

Как разделить данные val запятой

#jquery #jquery-select2

Вопрос:

Я создал select2 поле, которое изменяет input значение поля на выбранные параметры.

Я правильно делаю покупки, когда выбираю его, но выбранные не разделены запятой нужна помощь, пожалуйста

 $(function() {
  // turn the element to select2 select style
  $('.select2').select2({
    placeholder: "Select a state",
    maximumSelectionLength: 2,
    tokenSeparators: [',', ' ', ';'],
    allowClear: true,
  }).on('change', function(e) {      
    var data = $(".select2 option:selected").text();
    $("#test").val(data   ',');
    
  });
}); 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<p>
  <select class="select2" style="width:300px" multiple>
    <option value="AL">Alabama</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </select>
</p>

<input type="text" id="test">

см. пример https://jsfiddle.net/eszv1c47/

Комментарии:

1. @freedomn-m, эти данные «,» предназначены для конца значения, а не для промежуточного, я пытался добавить .join (‘,’), но это не работает

2. Не беспокойтесь, вам нужно получить .text() выход в виде массива для использования .join(",") — ответ приведен ниже

Ответ №1:

Для того, чтобы разделить значения запятыми (при .join(",") этом вам нужно получить тексты опций в виде массива.

Один из вариантов-использовать jquery .map() для перебора каждого выбранного параметра и возврата его текста в массив.

Без каких-либо других изменений ваш код

     var data = $(".select2 option:selected").text();
    $("#test").val(data   ',');

должно быть

     var data = $(".select2 option:selected").map((i,e) => $(e).text().trim()).toArray();
    $("#test").val(data.join(','));

Обновлена скрипка (с исправленным выбором 2) https://jsfiddle.net/u7zevh3g/

 $(function() {
  // turn the element to select2 select style
  $('.select2').select2({
    placeholder: "Select a state",
    maximumSelectionLength: 2,
    tokenSeparators: [',', ' ', ';'],
    allowClear: true,
  }).on('change', function(e) {
    var data = $(".select2 option:selected").map((i,e) => $(e).text()).toArray();
    $("#test").val(data.join(','));
  });
}); 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<p>
    <select  class="select2" style="width:300px" multiple>
        <option value="AL">Alabama</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
    </select>
</p>

<input type="text" id="test">
Метки: