Tutorialshore

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

when we are doing coding a project,their is a chance of misspelling the function name it will end up with an error function does not exists error php,so before calling a function you have to check if the function is already define or not,for we have simple php code to check if function exists or not here is the syntax

function_exists(FUNCTION_NAME_HERE);

This will Return true if the function is defined

e.g

if(function_exists('new_func')){
  //new_func is defined

  new_func();  call that function  
}

This function we can use at the time of defining a function,otherwise you will get an error message saying already the function “new_func” is defined

So for before all fucntion declare case you have to use function_exists(‘new_func’) fucntion to double confirm no where the function is define more than one times

see the error message here

if(!function_exists('new_func')){
 function new_func()
 {
  echo "php code to check if function exists or not";	 
 }
}

Out put
php code to check if function exists or not

Here am going to show you how to add Multi Item Carousel slide in your website here is the Multi Item Carousel slide sample code

1) Script files to include in the header

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js" type="90e6e4b8e06878c6e6ff42b7-text/javascript"></script>

2)  CSS Part

<style type="text/css">
 .carousel-wrap {
 width: 1000px;
 margin: auto;
 position: relative;
 }
 .owl-carousel .owl-nav{
 overflow: hidden;
 height: 0px;
 }

 .owl-theme .owl-dots .owl-dot.active span, 
 .owl-theme .owl-dots .owl-dot:hover span {
 background: #2caae1;
 }


 .owl-carousel .item {
 text-align: center;
 }
 .owl-carousel .nav-btn{
 height: 47px;
 position: absolute;
 width: 26px;
 cursor: pointer;
 top: 100px !important;
 }

 .owl-carousel .owl-prev.disabled,
 .owl-carousel .owl-next.disabled{
 pointer-events: none;
 opacity: 0.2;
 }

 .owl-carousel .prev-slide{
 background: url(img/icon.png) no-repeat scroll 0 0;
 left: -33px;
 }
 .owl-carousel .next-slide{
 background: url(img/icon.png) no-repeat scroll -24px 0px;
 right: -33px;
 }
 .owl-carousel .prev-slide:hover{
 background-position: 0px -53px;
 }
 .owl-carousel .next-slide:hover{
 background-position: -24px -53px;
 }

 span.img-text {
 text-decoration: none;
 outline: none;
 transition: all 0.4s ease;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 cursor: pointer;
 width: 100%;
 font-size: 23px;
 display: block;
 text-transform: capitalize;
 }
 span.img-text:hover {
 color: #2caae1;
 }
</style>

 

3) JQuery script to initialize

 

 <script type="text/javascript">
 $(document).ready(function() {

 $('.owl-carousel').owlCarousel({
 loop: true,
 dots: false,
 margin: 10,
 nav: true,
 navText:["<div class='nav-btn prev-slide'></div><div class='nav-btn next-slide'></div>"],
 responsive: {
 0: {
 items: 1
 },
 600: {
 items: 3
 },
 1000: {
 items: 3
 }
 }
 });
 });
 </script>

4) Finally HTML

 

<div class="carousel-wrap" style="text-align: center;">
<div class="owl-carousel owl-theme">
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item"><img src="/img/tutorialshore.jpeg" />
<span class="img-text">tutorialshore</span></div>
<div class="item"><img src="/img/tutorialshore.jpeg" />
<span class="img-text">tutorialshore</span></div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
</div>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js" ></script>

</div>

See Demo>