I have city and its corresponding locality. When user clicks city then its locality will show in Dropdown-Checkbox. How I can do with jQuery, AJAX and MySQL.

Recommended Answers

All 26 Replies

You can see my example in action here. Only the PHP code for retrieving the data is not visible, but am sure that is not an issue.

I need dropdown with checkboxes.

Show what you mean.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>jQuery MultiSelect Demo</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
        <script src="../jquery.bgiframe.min.js" type="text/javascript"></script>
        <script src="../jquery.multiSelect.js" type="text/javascript"></script>
        <link href="../jquery.multiSelect.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
        function searchshowlocality(cid)
            {
            if (cid=="")
               {
               document.getElementById("slocalitydiv").innerHTML="";
               return;
               } 
            if (window.XMLHttpRequest)
               {// code for IE7+, Firefox, Chrome, Opera, Safari
               xmlhttp_scid=new XMLHttpRequest();
               }
             else
               {// code for IE6, IE5
               xmlhttp_scid=new ActiveXObject("Microsoft.XMLHTTP");
               }
             xmlhttp_scid.onreadystatechange=function()
               {
               if (xmlhttp_scid.readyState==4 && xmlhttp_scid.status==200)
                 {
                 document.getElementById("slocalitydiv").innerHTML=xmlhttp_scid.responseText;
                 }
               }
             xmlhttp_scid.open("GET","searchgetlocalitynew.php?cid="+cid,true);
             xmlhttp_scid.send();
            }
            $(document).ready( function() {
                // Default options
                $("#control_1, #control_3, #control_4, #control_5").multiSelect();
                // Show test data
                $("FORM").submit( function() {
                    $.post('result.php', $(this).serialize(), function(r) {
                        alert(r);
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <form action="" method="post">
            </p>
            <select name="city"  size="5" multiple="multiple" id="city" style="width:120px;" onchange="searchshowlocality(this.value)">
            <option value="502">Agra</option> 
            <option value="129">Ahmedabad</option> 
            <option value="641">Bangalore</option> 
            <option value="272">Bhopal</option> 
            <option value="98">Chandigarh</option> 
            </select>
            <p id="slocalitydiv">
                <select id="control_3" name="control_3[]" multiple="multiple" size="5" >
                    <option value=""></option>
                    <option value="option_1" selected="selected">Option 1</option>
                    <option value="option_2">Option 2</option>
                    <option value="option_3">Option 3</option>
                    <option value="option_4">Option 4</option>
                    <option value="option_5">Option 5</option>
                    <option value="option_6">Option 6</option>
                    <option value="option_7">Option 7</option>
                </select>
            </p>
            <p>
                <input type="submit" value="Show Results" />
            </p>
        </form>
    </body>
</html>






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>jQuery MultiSelect Demo</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
        <script src="../jquery.bgiframe.min.js" type="text/javascript"></script>
        <script src="../jquery.multiSelect.js" type="text/javascript"></script>
        <link href="../jquery.multiSelect.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
        function searchshowlocality(cid)
            {
            if (cid=="")
               {
               document.getElementById("slocalitydiv").innerHTML="";
               return;
               } 
            if (window.XMLHttpRequest)
               {// code for IE7+, Firefox, Chrome, Opera, Safari
               xmlhttp_scid=new XMLHttpRequest();
               }
             else
               {// code for IE6, IE5
               xmlhttp_scid=new ActiveXObject("Microsoft.XMLHTTP");
               }
             xmlhttp_scid.onreadystatechange=function()
               {
               if (xmlhttp_scid.readyState==4 && xmlhttp_scid.status==200)
                 {
                 document.getElementById("slocalitydiv").innerHTML=xmlhttp_scid.responseText;
                 }
               }
             xmlhttp_scid.open("GET","searchgetlocalitynew.php?cid="+cid,true);
             xmlhttp_scid.send();
            }
            $(document).ready( function() {
                // Default options
                $("#control_1, #control_3, #control_4, #control_5").multiSelect();
                // Show test data
                $("FORM").submit( function() {
                    $.post('result.php', $(this).serialize(), function(r) {
                        alert(r);
                    });
                    return false;
                });
            });
        </script>
    </head>
        <body>
<?php
mysql_connect('localhost', 'root', '');
mysql_select_db(pg);
    if($_REQUEST['cid']==617) // Delhi
        $query="SELECT * FROM `pgcitylocations` where intcityid=118 or intcityid=119 or intcityid=121 or intcityid=126 or intcityid=604 or intcityid=605 or intcityid=617 order by vchLocationName";
    else if($_REQUEST['cid']==616) // Mumbai
        $query="SELECT * FROM `pgcitylocations` where intcityid=331 or intcityid=606 or intcityid=607 or intcityid=608 or intcityid=609 or intcityid=610 or intcityid=611 or intcityid=612 or intcityid=613 or intcityid=616 group by vchLocationName  order by vchLocationName";   
    else if($_REQUEST['cid']==651) // Gurgaon
        $query="SELECT * FROM `pgcitylocations` where intcityid=158 or intcityid=651 order by vchLocationName";
    else if($_REQUEST['cid']==156) // Faridabad
        $query="SELECT * FROM `pgcitylocations` where intcityid=648 or intcityid=156 order by vchLocationName";
    else if($_REQUEST['cid']==620) // Noida
        $query="SELECT * FROM `pgcitylocations` where intcityid=620 or intcityid=652 order by vchLocationName";
    else if($_REQUEST['cid']==594) // Kolkata
        $query="SELECT * FROM `pgcitylocations` where intcityid=594 or intcityid=627 or intcityid=628 or intcityid=629 or intcityid=630 or intcityid=631 or intcityid=632 order by vchLocationName";
    else if($_REQUEST['cid']==469) // Chennai
        $query="SELECT * FROM `pgcitylocations` where intcityid=469 or intcityid=633 or intcityid=634 or intcityid=635 or intcityid=636 or intcityid=637 order by vchLocationName";
    else if($_REQUEST['cid']==641) // Bangalore
        $query="SELECT * FROM `pgcitylocations` where intcityid=641 or intcityid=642 or intcityid=643 or intcityid=644 or intcityid=645 or intcityid=646 or intcityid=647 order by vchLocationName";
    else if($_REQUEST['cid']==8) // Hyderabad
        $query="SELECT * FROM `pgcitylocations` where intcityid=8 or intcityid=638 or intcityid=639 or intcityid=662 order by vchLocationName";
    else
        $query="select * from pgcitylocations where intCityId=".$_REQUEST['cid']." order by vchLocationName";
//  echo    $query;
    $locality_result=mysql_query($query);
    if(mysql_num_rows($locality_result)==0)
    {   
        echo "<select name='locality[]' id='locality' style='width:180px;'>";
        echo "<option value=''>Others</option>";
        echo "</select>";
    }
    else
    {
    ?>
    <select id="control_3" name="control_3[]" multiple="multiple" size="5">
    <?php
        while($locality_row=mysql_fetch_array($locality_result))
            echo "<option value='$locality_row[intLocationId]'>$locality_row[vchLocationName]</option>";
    echo "</select>";        
    }   
?>
</select>
</body>
</html>

So what is the problem? Is the multi select not working? Which multi select did you use.

It is working but when I choose city then its corresponding dropdown-checkbox of Locality do not show.

If you debug, do you see data coming back?

Yes.. It is working fine.. but it is showing simple muliti-list box rather dropdown-checkbox listing..

$("#control_1, #control_3, #control_4, #control_5").multiSelect();

#locality is missing here.

I am not able to understand what you want to say. I change code to$("#control_1, #control_3, #control_4, #control_5, #locality").multiSelect();still not able to solve. Please help.

Do you get any errors ? Can you give a download link for the multiSelect you are using? And where can I download the bgiframe plugin?

Do you have this page online somewhere to view? Your searchgetlocalitynew.php returns a complete HTML page (which is too much), which you insert in a div (or so it appears). After you do that you should call the multiselect again. Because you are replacing content, the setup for that select is gone.

I think that if you add after line 30:

$("#control_3").multiSelect();

it may work. The problem may be that your searchgetlocalitynew.php return a full HTML page. It would suffice to just output the select part.

I did what u have suggested. Still not working.

Did you remove all the HTML you don't need ?

Yes. I removed all HTML code.

In the code online, you have not added the multiselect yet. If you update the code/files online, I can at least see what you've done.

In which line and which page?
Both select are multiselect.

In which line and which page?

As stated in the previous post, after line 30, which is:

document.getElementById("slocalitydiv").innerHTML=xmlhttp_scid.responseText;

This line replaces (part of) your content, so you need to setup the multiselect again for this part.

I did the changes, but still not working.

Not working is too vague... what works, what doesnt, do you get errors ?

It is showing simple multiselect instead of dropdown with checkbox. The class do remove when city selects.

I checked online, and you still haven't added the code I suggested.

Please mention which code you are mentioning. Give me code and and where I have to add ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.