2
Contributors
26
Replies
37
Views
5 Years
Discussion Span
Last Post by abhi10kumar
0

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.

Edited by pritaeas: Changed link

0
<!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>
0

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

Edited by abhi10kumar

0

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

0

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.

0

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?

Edited by pritaeas

0

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.

0

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.

0

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.

Edited by pritaeas

0

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.

0

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

-1

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.