Как получить все выбранные значения, используя Bootstrap MULTISELECT и использовать его в AJAX

Question

Я использую Bootstrap Multiselect, это моя установка в моем HTML:

<div class="form-group"> 
    <select class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %} 
     <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %} 
    </select> 
</div> 

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

$.ajax({ 
    url: "cnt_bldg/", 
    type: "GET", 
    dataType: "JSON", 
    data: { 
     'brgy_id': brgy_id, 
     'bldg_type': $('#bldg_type option:selected').val() 
    }, 
    ... 

проблема с $('#bldg_type option:selected').val() есть я могу получить только 1 значение. Напр. Я проверяю Market и Police Station по моему выбору, и посмотрел его в моей консоли http://127.0.0.1:8000/cnt_bldg/?brgy_id=All&bldg_type=Market". Он получает только Market.

Как получить все значения и использовать их для моего запроса?

BTW, я использую Django. Я уже прочитал this answer, но я не знаю, как использовать результат в моем коде AJAX выше.

Answer 1

<div class="form-group"> 
    <select id="multiselect1" class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %} 
     <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %} 
    </select> 
</div> 

Добавить идентификатор multiselect в ваш элемент управления.

Объявите переменную глобально в вашем JavaScript, как показано ниже:

var selected = []; 

Инициализировать его, как показано ниже [по ссылке ответ вы предоставили]

$('#multiselect1').multiselect({ 
    selectAllValue: 'multiselect-all', 
    onChange: function(element, checked) { 
     var brands = $('#multiselect1 option:selected'); 
     $(brands).each(function(index, brand){ 
      selected.push([$(this).val()]); 
     }); 
    } 
}); 

отправить его через AJAX.

$.ajax({ 
    url: "cnt_bldg/", 
    type: "GET", 
    dataType: "JSON", 
    data: { 
     'brgy_id': brgy_id, 
     'bldg_type': selected //This will send the values as list of strings 
    }, 
    ... 

Примечание - При шевелении полученных значений, принять его в виде списка строк в вашем методе сервера !!

Answer 2

Его действительно просто получить значения параметров мультиселектора.

$('#bldg_type').multiselect({ 
     onChange: function(){ 
      var selectedOptions = $('#bldg_type').val(); 
      console.log(selectedOptions); 
}}) 

ВыбранныеOptions должны предоставить вам список выбранных параметров. Он дает все значения, которые выбираются из опций в теге select.

Вы можете определить переменную selectedOptions где-то глобально, чтобы вызов ajax мог получить к ней доступ.

удачи и надеется, что это помогает

Answer 3

вы пробовали просто

$('#bldg_type').val() 

Он работает в моей самозагрузке-множественный.

Answer 4

HTML

<div class="form-group"> 
     <select id="multiselect1" class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %} 
      <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %} 
     </select> 
</div> 

Jquery

var selected = $('#multiselect1').val()