How To Use Jquery Mutliselect Dropdown

Monday, May 13th, 2013 Programming

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:

[php]
<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>
[/php]

Step 2:

Use JavaScript Function to Trigger Multi-Select Event

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

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

[php]
<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>
[/php]

Step 4:

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

Output will be Displayed as

drop_down

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.

[php]
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
}
}
[/php]
Your complete code will look like this
[html]
<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>
[/html]

For working example of Multi-select dropdown checkbox Click Here

Must know before reading this article

  • PHP Basics
  • HTML Basics
  • Jquery

No comments yet.

Leave a comment

Request a Free SEO Quote