Как установить все параметры выбора в качестве значения для параметра «Все»? - PullRequest
Новая
       45

Как установить все параметры выбора в качестве значения для параметра «Все»?

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

У меня есть приложение, использующее плагин jquery select2 для фильтров выбора опций. Есть ли решение иметь опцию «Все», которая выбирает все доступные значения опций и передает их в качестве результата для выбора? Как добавить все параметры к одному параметру в массиве или что-то и отображать его в качестве первого варианта. Как и где добавить его в функцию select2 ()? Меня интересует решение, которое будет подходить ко всем параметрам, например так: 

<option value="LIST OF ALL OPTIONS SEPARATED BY COMMA HERE">All</option>

Итак, я мог бы получить такой результат ниже: 

<option value="US,UK,DE...">All</option> // like this but not sure how to grab all the values and prepend this here.
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="DE">Germany</option>
...

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

Например, есть возможность выбора страны. И некоторые результаты для всех стран. Как выбрать все опции с помощью select2? Любой совет приветствуется! Спасибо!

1 Ответ

1 голос
/ 16 апреля 2019

Вот пример того, как:

  1. Получить все значения из <select>, разделенные запятыми.
  2. Добавить <option> с новым значением, называемым "ALL".". 

$('.makeAll').each(function() {

  $select = $(this);

  var values = $('option', $select).map(function() {
    return this.value;
  }).toArray().join(',');

  $('<option>', {
    'value': values,
    'text': 'ALL'
  }).prependTo($select);

});

// For demo; output the selected value.
$('select').on('change', function() {
  console.log(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="makeAll">
  <option value="US">United States</option>
  <option value="UK">United Kingdom</option>
  <option value="DE">Germany</option>
</select>

<select class="makeAll">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

EDIT

Обратите внимание, что значения с запятыми будут считаться несколькими значениями, поскольку разделители одинаковы.Например: 

<option value="1,2,3,4">

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

var delim = '#';

$('.makeAll').each(function() {

  var $select = $(this);

  var values = $('option', $select).map(function() {
    return this.value;
  }).toArray().join(delim);

  $('<option>', {
    'value': values,
    'text': 'ALL'
  }).prependTo($select);

});

// For demo; output the selected value(s).
$('select').on('change', function() {
  console.log(this.value.split(delim));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="makeAll">
  <option value="1,2,3,4">Sample</option>
  <option value="spin">Funnel</option>
  <option value="4,22(n,s)">Igloo</option>
</select>

<select class="makeAll">
  <option value="1-2-3-4">Result</option>
  <option value="spin;watch">Crystal</option>
  <option value="4,22(n-s)">Curtain</option>
</select>
...