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:
[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
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.