jquery - bootstrap - select multiple css
bootstrap multiselect obtiene valores seleccionados (6)
¿Cómo puedo volver a activar en Cambiar todos los valores seleccionados en mi menú desplegable de selección múltiple? Plugin utilizado here . Tratando de usar lo siguiente, pero creo que estoy en el camino equivocado
$(''#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);
}
});
Lo encontré
$(''#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);
}
});
En su página Html por favor agregue
<!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>
En su página ajax.js por favor agregue
$(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");
}
});
}));
});
En tu página action.php agregar
echo "<b>You selected :</b>";
for($i=0;$i<=count($_POST[''categories'']);$i++){
echo $_POST[''categories''][$i]."<br>";
}
La solución lo encontré para trabajar en mi caso.
$(''#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);
}
});
Más eficiente, debido a menos búsquedas de DOM:
$(''#multiselect1'').multiselect({
// ...
onChange: function() {
var selected = this.$select.val();
// ...
}
});
Versión más corta:
$(''#multiselect1'').multiselect({
...
onChange: function() {
console.log($(''#multiselect1'').val());
}
});
$(''#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'']
});