Multiselect dropdown with checkboxes demo code in php

Being a developer you may face a situation, have to give multiple select option for the front end user, now it is easy with the help of bootstrap multiselect script we can accomplish that task within 10 minutes. Here am going to explain you Multi select drop down with check boxes demo code in php

here is the Multiselect dropdown with checkboxes demo code in php

Step 1

Files To Include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
</script>

Step 2

HTML Form

<div class="container-fluid"style="text-align: center;margin-bottom:200px;">
<h1>Demo Multiselect Box In PHP</h1>
<div class="row">
<div class="col-md-12" >

<form id="myForm" method="POST">
<input name="current_select_values" type="hidden" value="" id="current_select_values">
<div class="col-md-12" >
 <select size="5" name="current_select[]" multiple="multiple" id="current_select">
 <option value="current1">current1</option>
 <option value="current2">current2</option>
 <option value="current3">current3</option>
 <option value="current4">current4</option>
 <option value="current5">current5</option>
 </select>
 </div><div class="col-md-12" style="margin-top:20px;" >
 <input type="submit" value="Submit" ></div>
</form></div></div></div>

Step 3

Script Files

<script>
$(document).ready(function() {       
	$('#current_select').multiselect({		
		nonSelectedText: 'Select Current'				
	});
});

$(function () {

 
 $('#current_select').multiselect({ 
 buttonText: function(options, select) {
 var labels = [];
 console.log(options);
 options.each(function() {
 labels.push($(this).val());
 });
 $("#current_select_values").val(labels.join(',') + '');
 return labels.join(', ') + '';
 //}
 }
 
 });
});
</script>

Step 4

Post Action


<?php print_r ($_POST['current_select']); ?>

See Demo Code

Multiselect dropdown with checkboxes demo code in php

My Thought

Your email address will not be published. Required fields are marked *

Our Tool : hike percentage calculator