Блог

У меня есть форма конфигурации с несколькими тегами множественного выбора, использующими select2. Выбранные параметры отображаются правильно при использовании $('#selectitem').select2('data'); , но при отправке формы передается только первый выбранный элемент.

фрагмент (он находится в шаблоне jinja2, приложении Flask, с UiKit3):

 <form action="" method="post">
...
                        {% if param['param_type'] == 'list' %}
                          <select id="{{'node_%s' % param['node_id']}}" name="{{'node_%s' % param['node_id']}}" multiple='multiple' class="uk-select uk-form-width-large">
                            {% for p in param['param_value'] %}
                              <option value='{{ p }}'>{{ p }}</option>
                            {% endfor %}
                          </select>
                        {% else %}
                          <textarea id="{{'node_%s' % param['node_id']}}" name="{{'node_%s' % param['node_id']}}" class='uk-textarea uk-form-width-large'>{{ param['param_value'] }}</textarea>
                        {% endif %}
...
      <button type='submit' name='submit' class='uk-button-default'>Change Settings</button>
</form>
  

и select2 JS:

   $(document).ready(function() {
      $(".uk-select").select2({closeOnSelect: false});
  });
  

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

Я попытался присвоить name тегу select значение name[] , как предлагалось в другом месте, но это не возымело никакого эффекта. Я много искал решение в Интернете, но ничего не нашел.

При выборе значения из выпадающего списка вы можете сохранить выбранные значения в переменной javascript, а затем передать эту переменную на сервер с помощью вызова ajax.

Ниже приведен пример, который сохраняет выбранные значения в ajaxOptions.data.selectedValues при выборе значений из выпадающего списка.

 var ajaxOptions = {};
var ajaxOptions.data = {};

$(".uk-select").change(function(){
    ajaxOptions.data.selectedValues = $(this).val();
    console.log(ajaxOptions);
  });
  

Пример JsFiddle:https://jsfiddle.net/g7nkfpca /

ОТРЕДАКТИРОВАННЫЙ ОТВЕТ:

Вы также можете использовать отправку собственной HTML-формы. Для этого прежде всего вам нужно указать имя тега select в формате массива, как показано ниже.

 <select id="{{'node_%s' % param['node_id']}}" name="{{'node_%s' % param['node_id']}}[]" multiple='multiple' class="uk-select uk-form-width-large">
  

И в вашем PHP-коде повторите $_POST данные, чтобы получить все выбранные параметры один за другим, смотрите код ниже.

 // Check if any option is selected 
if(isset($_POST["node_XXX"]))  
{ 
   // Retrieving each selected option 
   foreach ($_POST['node_XXX'] as $node)  
   print "You selected $node<br/>"; 
} 
  

В приведенном выше коде XXX — это param['node_id'] тот, который вы можете заменить.

Вы можете просто добавить скобки к названию элемента:

 <select class="form-control" multiple="multiple" data-plugin="select2" id="id_country" name="id_country[]" required="">
  

Тогда он уже есть в массиве.