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.
abhi10kumar 0 Junior Poster
abhi10kumar 0 Junior Poster
I need dropdown with checkboxes.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Show what you mean.
abhi10kumar 0 Junior Poster
<!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>
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
So what is the problem? Is the multi select not working? Which multi select did you use.
abhi10kumar 0 Junior Poster
It is working but when I choose city then its corresponding dropdown-checkbox of Locality do not show.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
If you debug, do you see data coming back?
abhi10kumar 0 Junior Poster
Yes.. It is working fine.. but it is showing simple muliti-list box rather dropdown-checkbox listing..
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
$("#control_1, #control_3, #control_4, #control_5").multiSelect();
#locality is missing here.
abhi10kumar 0 Junior Poster
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.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
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?
abhi10kumar 0 Junior Poster
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
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.
abhi10kumar 0 Junior Poster
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
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.
abhi10kumar 0 Junior Poster
I did what u have suggested. Still not working.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Did you remove all the HTML you don't need ?
abhi10kumar 0 Junior Poster
Yes. I removed all HTML code.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
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.
abhi10kumar 0 Junior Poster
In which line and which page?
Both select are multiselect.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
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.
abhi10kumar 0 Junior Poster
I did the changes, but still not working.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Not working is too vague... what works, what doesnt, do you get errors ?
abhi10kumar 0 Junior Poster
It is showing simple multiselect instead of dropdown with checkbox. The class do remove when city selects.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
I checked online, and you still haven't added the code I suggested.
abhi10kumar 0 Junior Poster
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.