How To Use Jquery Mutliselect Dropdown

I am using http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

Samples here

Initially it seemed tough to get it working as a beginner, but eventually I managed to successfully get it to work.

Step 1:

Download the Jquery Code Or You Can Include it From CDN (Content Delievery Network)

For multiple select drop-down, We need to include the following resource,

Download links are

After including the above files your code will look like:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>

Step 2:

Use JavaScript Function to Trigger Multi-Select Event

<script>
 $(document).ready(function(){
   $("#check_list").multiselect();
 });
</script>

For customizing multi-select,We have to pass in a object with one or more options like header.height etc. For all available options Click Here

Step 3:

In <select> tag define multiple attribute for selecting multiple options and define name in array format as specified below.

Note that at the end of check_list in the <name>tag [] symbol is used,that denotes the array

<select name="check_list[]" id="check_list" multiple="multiple">
  <option value="1"> Apple </option>
  <option value="2"> Orange </option>
  <option value="3"> Mango </option>
  <option value="4"> Grapes </option>
  <option value="5"> Strawberry </option>
</select>

Step 4:

When you have embedded this multi-select dropdown in your form,

Output will be Displayed as

Step 5:

Onclicking submit button the value selected in drop-down is posted as an array.Let us assume we are using PHP to get this value.

if(!empty($_POST['check_list'])){ //Checking if check_list control is empty or not
  foreach($_POST['check_list'] as $check){ //Looping through the array of values in foreach
    print_r($check);//return the value of the variable
    $test = implode(',',$check);// implode tha array value to pass it in a query
}
}

Your complete code will look like this

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Dropdown</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript">
	 $(document).ready(function(){
  		 $("#check_list").multiselect();
 	 });
</script>
</head>
<body id="test">
  <form id="multiple" method="post" enctype="multipart/form-data">
	 <select title="Basic example" multiple="multiple" name="example-basic" size="5">
	   <option value="1">Apple</option>
	   <option value="2">Orange</option>
	   <option value="3">Mango</option>
	   <option value="4">Grapes</option>
	   <option value="5">Strawberry</option>
	</select>
	 <input type="submit" name="submit" value="submit" />
  </form> 
<?php
if(isset($_POST['submit'])){
	if(!empty($_POST['check_list'])){ 
	  foreach($_POST['check_list'] as $check){ 
		print_r($check);
		$test = implode(',',$check);
	}
	}
$fruits = mysql_query("SELECT * FROM fruits WHERE fruit_id IN(".$test.")");
$fetch_fruits = mysql_fetch_array($fruits);
$name = $fetch_fruits['fruit_name'];
$desc = $fetch_fruits['desc'];
echo '<div>"'.$name.'"</div>';
echo '<div>"'.$desc.'"</div>';
}
?>
</body>
</html>

For working example of Multi-select dropdown checkbox Click Here

Must know before reading this article

PHP Basics
HTML Basics
Jquery