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.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

I need dropdown with checkboxes.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

Show what you mean.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80
<!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>
Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

If you debug, do you see data coming back?

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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

#locality is missing here.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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?

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

Download code http://pghostels.co.in/p.zip and working path is /demo/index.php

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

Here is running code http://pghostels.co.in/p/demo/

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

I did what u have suggested. Still not working.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

Yes. I removed all HTML code.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

I did the changes, but still not working.

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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

Re: Need jQuery, AJAX, MYSQL & PHP Dropdown-Checkbox 80 80

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 1.18 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.