bootstrap multiselect獲取選定值

如何在我的multiselect下拉列表中更改onChange中的所有選定值。使用的插件here。嘗試使用以下，但我認爲我是在錯誤的軌道bootstrap multiselect獲取選定值

$('#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); 
    } 
});

來源

2013-12-11 fefe

的解決方案是什麼，我發現在我的情況下工作

$('#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); 
    } 
});

來源

2014-04-22 08:06:42 fefe

對於解決方案+1，但是您在selected.push語句中出現錯誤。您將選項值的列表而不是字符串推送。你想刪除封閉的括號。 – tbradley22

較短版本：

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

來源

2015-11-14 15:30:19

太棒了！非常感謝你。 – adamj

不幸的是，這在IE11中不起作用 – AlexM

在IE11中爲我工作 –

更有效，由於較少的DOM查找：

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

來源

2016-03-05 09:32:20 eagor

在HTML頁面中請加

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Test the multiselect with ajax</title> 

    <!-- Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <!-- Bootstrap multiselect --> 
    <link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <div class="container"> 
     <br> 

     <form method="post" id="myForm"> 

     <!-- Build your select: --> 
     <select name="categories[]" id="example-getting-started" multiple="multiple" class="col-md-12"> 
      <option value="A">Cheese</option> 
      <option value="B">Tomatoes</option> 
      <option value="C">Mozzarella</option> 
      <option value="D">Mushrooms</option> 
      <option value="E">Pepperoni</option> 
      <option value="F">Onions</option> 
      <option value="G">10</option> 
      <option value="H">11</option> 
      <option value="I">12</option> 
     </select> 
     <br><br> 
     <button type="button" class="btnSubmit"> Send </button> 

     </form> 

     <br><br> 
     <div id="result">result</div> 
    </div><!--container--> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <!-- Bootstrap multiselect --> 
    <script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script> 

    <!-- Bootstrap multiselect --> 
    <script src="ajax.js"></script> 

    <!-- Initialize the plugin: --> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

     $('#example-getting-started').multiselect(); 

     }); 
    </script> 

    </body> 
</html>

在你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($("<option></option>").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"); 
     } 
    }); 
    })); 
});

在你的行動。 php頁面增加到手推車

echo "<b>You selected :</b>"; 

    for($i=0;$i<=count($_POST['categories']);$i++){ 

    echo $_POST['categories'][$i]."<br>"; 

    }

來源

2016-05-15 20:46:51 Astm

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

來源

2016-09-20 07:30:43

bootstrap multiselect獲取選定值

回答

相關問題