I have city and its corresponding locality. City is showing dropdwon and Locality in Dropdown-Checkbox
I got code Dropdown-Checkbox, when user clicks city then its locality will show in Dropdown-Checkbox. It is showing multilist control in thepage but when I choose city it is showing multilist-box rather Dropdown-Checkbox. How I can do with jQuery, AJAX and MySQL.
abhi10kumar 0 Junior Poster
diafol
SHow your code.
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>
abhi10kumar 0 Junior Poster
Did u check my code ?
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.