bootstrap multiselect获取选定的值

如何重新启用onChange我的多选下拉列表中的所有选定值。 这里使用的插件。 试图使用以下但我认为我走错了路

$('#multiselect1').multiselect({ selectAllValue: 'multiselect-all', enableCaseInsensitiveFiltering: true, enableFiltering: true, maxHeight: '300', buttonWidth: '235', onChange: function(element, checked) { var brands = $('#multiselect1 option:selected'); var selection = []; $(brands).each(function(index, brand){ selection.push(brand); }); console.log(selection); } }); 

找到了

 $('#multiselect1').multiselect({ selectAllValue: 'multiselect-all', enableCaseInsensitiveFiltering: true, enableFiltering: true, maxHeight: '300', buttonWidth: '235', onChange: function(element, checked) { var brands = $('#multiselect1 option:selected'); var selected = []; $(brands).each(function(index, brand){ selected.push([$(this).val()]); }); console.log(selected); } }); 

Answer 1

我发现在我的案例中工作的解决方案

 $('#multiselect1').multiselect({ selectAllValue: 'multiselect-all', enableCaseInsensitiveFiltering: true, enableFiltering: true, maxHeight: '300', buttonWidth: '235', onChange: function(element, checked) { var brands = $('#multiselect1 option:selected'); var selected = []; $(brands).each(function(index, brand){ selected.push([$(this).val()]); }); console.log(selected); } }); 

Answer 2

更短的版本：

 $('#multiselect1').multiselect({ ... onChange: function() { console.log($('#multiselect1').val()); } }); 

Answer 3

由于DOM查找次数较少，效率更高：

 $('#multiselect1').multiselect({ // ... onChange: function() { var selected = this.$select.val(); // ... } }); 

Answer 4

 $('#multiselect1').on('change', function(){ var selected = $(this).find("option:selected"); var arrSelected = []; selected.each(function(){ arrSelected.push($(this).val()); }); }); 

Answer 5

在你的Html页面中，请添加

                  
 
 
   Cheese Tomatoes Mozzarella Mushrooms Pepperoni Onions 10 11 12  

  Send  
 

 
result
 
             

在你的ajax.js页面中，请添加

 $(document).ready(function () { $(".btnSubmit").on('click',(function(event) { var formData = new FormData($('#myForm')[0]); $.ajax({ url: "action.php", type: "POST", data: formData, contentType: false, cache: false, processData:false, success: function(data) { $("#result").html(data); // To clear the selected options var select = $("#example-getting-started"); select.children().remove(); if (data.d) { $(data.d).each(function(key,value) { $("#example-getting-started").append($("").val(value.State_id).html(value.State_name)); }); } $('#example-getting-started').multiselect({includeSelectAllOption: true}); $("#example-getting-started").multiselect('refresh'); }, error: function() { console.log("failed to send the data"); } }); })); }); 

在你的action.php页面中添加

  echo "You selected :"; for($i=0;$i<=count($_POST['categories']);$i++){ echo $_POST['categories'][$i]."
"; } 

Answer 6

 $('#multiselect1').on('change', function(){ var selected = $(this).find("option:selected"); var arrSelected = []; // selected.each(function(){ // arrSelected.push($(this).val()); // }); // The problem with the above selected.each statement is that // there is no iteration value. // $(this).val() is all selected items, not an iterative item value. // With each iteration the selected items will be appended to // arrSelected like so // // arrSelected [0]['item0','item1','item2'] // arrSelected [1]['item0','item1','item2'] // You need to get the iteration value. // selected.each((idx, val) => { arrSelected.push(val.value); }); // arrSelected [0]['item0'] // arrSelected [1]['item1'] // arrSelected [2]['item2'] });