How do I get back on onChange all selected values in my multiselect dropdown. Used plugin here. Trying to use the following but I think I'm on the wrong track
$('#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);
}
});
found it
$('#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);
}
});
This question is related to
jquery
twitter-bootstrap
multi-select
the solution what I found to work in my case
$('#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);
}
});
Shorter version:
$('#multiselect1').multiselect({
...
onChange: function() {
console.log($('#multiselect1').val());
}
});
more efficient, due to less DOM lookups:
$('#multiselect1').multiselect({
// ...
onChange: function() {
var selected = this.$select.val();
// ...
}
});
In my case i was using jQuery validation rules with
submitHandler function and submitting the data as new FormData(form);
Select Option
<select class="selectpicker" id="branch" name="branch" multiple="multiple" title="Of Branch" data-size="6" required>
<option disabled>Multiple Branch Select</option>
<option value="Computer">Computer</option>
<option value="Civil">Civil</option>
<option value="EXTC">EXTC</option>
<option value="ETRX">ETRX</option>
<option value="Mechinical">Mechinical</option>
</select>
<input type="hidden" name="new_branch" id="new_branch">
Get the multiple selected value and set to new_branch input value & while submitting the form get value from new_branch
Just replace hidden with text to view on the output
<input type="text" name="new_branch" id="new_branch">
Script (jQuery / Ajax)
<script>
$(document).ready(function() {
$('#branch').on('change', function(){
var selected = $(this).find("option:selected"); //get current selected value
var arrSelected = []; //Array to store your multiple value in stack
selected.each(function(){
arrSelected.push($(this).val()); //Stack the value
});
$('#new_branch').val(arrSelected); //It will set the multiple selected value to input new_branch
});
});
</script>
$('#multiselect1').on('change', function(){
var selected = $(this).find("option:selected");
var arrSelected = [];
selected.each(function(){
arrSelected.push($(this).val());
});
});
$('#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']
});
In your Html page please add
<!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>
In your ajax.js page please add
$(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");
}
});
}));
});
In your action.php page add
echo "<b>You selected :</b>";
for($i=0;$i<=count($_POST['categories']);$i++){
echo $_POST['categories'][$i]."<br>";
}
Source: Stackoverflow.com