{"id":624,"date":"2013-05-13T05:18:55","date_gmt":"2013-05-13T09:18:55","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/programming-blog\/?p=624"},"modified":"2013-05-13T06:53:49","modified_gmt":"2013-05-13T10:53:49","slug":"how-to-use-jquery-mutliselect-dropdown","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/programming-blog\/how-to-use-jquery-mutliselect-dropdown\/","title":{"rendered":"How To Use Jquery Mutliselect Dropdown"},"content":{"rendered":"

I am using <\/b>http:\/\/www.erichynds.com\/jquery\/jquery-ui-multiselect-widget\/<\/span><\/p>\n

\u00a0Samples here<\/b><\/p>\n

Initially it seemed tough to get it working as a beginner, but eventually I managed to successfully get it to work.<\/p>\n

Step 1:<\/p>\n

Download the Jquery Code Or You Can Include it From CDN (Content Delievery Network)<\/p>\n

For multiple select drop-down, We need to include the following resource,<\/p>\n

Download links are<\/p>\n

\n
    \n
  1. jquery-ui.min.js<\/a><\/li>\n
  2. jquery-ui.css<\/a><\/li>\n
  3. jquery.multiselect.js<\/a><\/li>\n
  4. jquery.multiselect.css<\/a><\/li>\n<\/ol>\n<\/div>\n

    After including the above files your code will look like:<\/p>\n

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

    Step 2:<\/p>\n

    Use JavaScript Function to Trigger Multi-Select Event<\/p>\n

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

    For customizing multi-select,We have to pass in a object \u00a0with one or more options like header.height etc. For all available options Click Here<\/a><\/p>\n

    Step 3:<\/p>\n

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

    Note that at the end of check_list in the <name>tag []<\/strong>\u00a0symbol\u00a0<\/strong>is used,that denotes the array<\/p>\n

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

    Step 4:<\/p>\n

    When you have embedded this multi-select dropdown in your form,<\/p>\n

    Output will be Displayed as<\/p>\n

    \"drop_down\"<\/a><\/p>\n

    Step 5:<\/p>\n

    Onclicking submit button the value selected in drop-down is posted as an array.Let us assume we are using \u00a0PHP to get this value.<\/p>\n

    [php]
    \nif(!empty($_POST[‘check_list’])){ \/\/Checking if check_list control is empty or not
    \n foreach($_POST[‘check_list’] as $check){ \/\/Looping through the array of values in foreach
    \n print_r($check);\/\/return the value of the variable
    \n $test = implode(‘,’,$check);\/\/ implode tha array value to pass it in a query
    \n}
    \n}
    \n[\/php]
    \nYour complete code will look like this
    \n[html]
    \n<html lang="en">
    \n<head>
    \n<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>
    \n<title>jQuery MultiSelect Dropdown<\/title>
    \n<link rel="stylesheet" type="text\/css" href="..\/jquery.multiselect.css" \/>
    \n<link rel="stylesheet" type="text\/css" href="http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1\/themes\/ui-lightness\/jquery-ui.css" \/>
    \n<script type="text\/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.js">
    \n<\/script>
    \n<script type="text\/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1\/jquery-ui.min.js"><\/script>
    \n<script type="text\/javascript" src="..\/src\/jquery.multiselect.js"><\/script>
    \n<script type="text\/javascript">
    \n\t $(document).ready(function(){
    \n \t\t $("#check_list").multiselect();
    \n \t });
    \n<\/script>
    \n<\/head>
    \n<body id="test">
    \n <form id="multiple" method="post" enctype="multipart\/form-data">
    \n\t <select title="Basic example" multiple="multiple" name="example-basic" size="5">
    \n\t <option value="1">Apple<\/option>
    \n\t <option value="2">Orange<\/option>
    \n\t <option value="3">Mango<\/option>
    \n\t <option value="4">Grapes<\/option>
    \n\t <option value="5">Strawberry<\/option>
    \n\t<\/select>
    \n\t <input type="submit" name="submit" value="submit" \/>
    \n <\/form>
    \n<?php
    \nif(isset($_POST[‘submit’])){
    \n\tif(!empty($_POST[‘check_list’])){
    \n\t foreach($_POST[‘check_list’] as $check){
    \n\t\tprint_r($check);
    \n\t\t$test = implode(‘,’,$check);
    \n\t}
    \n\t}
    \n$fruits = mysql_query("SELECT * FROM fruits WHERE fruit_id IN(".$test.")");
    \n$fetch_fruits = mysql_fetch_array($fruits);
    \n$name = $fetch_fruits[‘fruit_name’];
    \n$desc = $fetch_fruits[‘desc’];
    \necho ‘<div>"’.$name.’"<\/div>’;
    \necho ‘<div>"’.$desc.’"<\/div>’;
    \n}
    \n?>
    \n<\/body>
    \n<\/html>
    \n[\/html]<\/p>\n

    For working example of Multi-select dropdown checkbox Click Here<\/a><\/p>\n

    Must know before reading this article<\/strong><\/p>\n