I have dropdown down boxes with checkboxes; I’m using jguery to display Dropdown with checkboxes; I’m populating Select Locality with Select City dropdown. Now, when I select a city from dropdown It should display its locality in dropdown with checkboxes but showing localities in dropdown only.
Please refer attached image to view my problem.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Paying Guests/PG/Hostels Accomodations for Students/Girls/Males/Professionals</title>
<META name="description" content="Find Single/Sharing PG/Hostels Accommodation within budget for Boys, Men, Girls, Ladies, Women all over India." />
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link href="css/pagination.css" rel="stylesheet" type="text/css" />
<link href="css/A_red.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="divgetcity.js"></script>
<style>
form .outer-submit {
margin : 0 auto;
background:transparent url("images/search.png") no-repeat top left;
}
form input[type=submit] {
border : none;
background:transparent url("images/search.png") no-repeat top right;
width:90px;
height:29px;
}
</style>
<script language="JavaScript1.2">
function openwindow(pg_id)
{
window.open("view_album.php?pg_id="+pg_id,"mywindow","menubar=1,resizable=1,width=1000,height=800");
}
</script>
<script>
function limitText(limitField, limitCount, limitNum)
{
if (limitField.value.length > limitNum)
{ limitField.value = limitField.value.substring(0, limitNum);}
else
{ limitCount.value = limitNum - limitField.value.length; }
}
function validate(theform)
{
if(theform.name.value=="")
{
alert('Please Enter Name');
theform.name.focus();
return false;
}
if(theform.email.value=="")
{
alert('Please Enter E Mail');
theform.email.focus();
return false;
}
if(theform.email.value.length>0)
{
if(theform.email.value.indexOf(" ") >= 0)
{
alert("Please enter your email-id without any white space character.");
theform.email.focus();
return (false);
}
if ( (theform.email.value.indexOf("@") == -1) || (theform.email.value.indexOf(".") == -1) )
{
alert("Please enter a valid email-id");
theform.email.focus();
return (false);
}
BeforeAtRate = theform.email.value.substring(0,theform.email.value.indexOf("@"));
AfterAtRate = theform.email.value.substring(theform.email.value.indexOf("@")+1,theform.email.value.length);
if (AfterAtRate.indexOf(".") == -1)
{
alert("Please enter a valid email-id");
theform.email.focus();
return (false);
}
middle = AfterAtRate.substring(0, AfterAtRate.indexOf("."));
last = AfterAtRate.substring(AfterAtRate.indexOf(".") + 1,AfterAtRate.length);
if (BeforeAtRate.length == 0 || middle.length == 0 || last.length == 0)
{
alert("Please enter a valid email-id");
theform.email.focus();
return (false);
}
}
if(theform.contactno.value=="")
{
alert('Please Enter Contact Number');
theform.contactno.focus();
return false;
}
if(isNaN(theform.contactno.value))
{
alert('Please Enter Valid Contact Number; Only Digits');
theform.contactno.focus();
return false;
}
if(theform.city.value=="")
{
alert('Please Enter City');
theform.city.focus();
return false;
}
if(theform.locality.value=="")
{
alert('Please Enter Locality');
theform.locality.focus();
return false;
}
if(theform.from.value=="" && theform.to.value=="")
{
alert('Please Choose FROM and TO Price');
theform.from.focus();
return false;
}
if((theform.from.value > theform.to.value) || (theform.from.value == theform.to.value))
{
alert('Please Choose Valid Price Range');
theform.from.focus();
return false;
}
return true;
}
</script>
<link rel="stylesheet" type="text/css" href="assets/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="assets/jquery-ui.css" />
<script type="text/javascript" src="assets/jquery.js"></script>
<script type="text/javascript" src="assets/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/prettify.js"></script>
<script type="text/javascript" src="assets/jquery.multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pgfor").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"100", height:"50"});
$("#city").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"100", height:"150", multiple:false, header:false});
$("#locality").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"100", height:"150", header:false});
$("#roomtype").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"100", height:"50"});
$("#pricetype").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"100", height:"50"});
$("#price_value").multiselect({checkAllText:"All", uncheckAllText:"None", minWidth:"130", height:"100"});
});
</script>
</head>
<link rel="stylesheet" type="text/css" href="src/common.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="src/destinations.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="src/destinationsdynamic.min.css" media="screen">
<body style="background-image:url(images/bg123.jpg); background-repeat:repeat-x; background-attachment:fixed; background-color:#E9E9E9;">
<div id="main_container">
<div id="header">
<style>
.register
{ background:transparent url('images/register.png') no-repeat top; width: 90px; height: 29px; color:white; border:none; }
.login
{ background:transparent url('images/register.png') no-repeat top; width: 90px; height: 29px; color:white; border:none; }
</style>
<table style="width:100%;">
<tr>
<td>
<div id="logo">
<a href="index.php"><img src="images/logo3.jpg" alt="" title="" border="0"></a>
</div>
</td>
<td>
<div align="right" style="padding-top:5px; font-size:11px; padding-right:10px;">
<span style="padding-right:5px;"><strong>Welcome
Guest ! </strong></span>
<span style="padding-right:10px;">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
.register
{ background:transparent url('images/register.png') no-repeat top; width: 90px; height: 29px; color:white; border:none; }
.login
{ background:transparent url('images/register.png') no-repeat top; width: 90px; height: 29px; color:white; border:none; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#login").click(function() {
var action = $("#form1").attr('action');
var form_data = {
username: $("#username").val(),
password: $("#password").val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
window.location='index.php';
else
$("#message").html("<p class='error'>Invalid username and/or password.</p>");
}
});
return false;
});
/********************************/
/* Forget E Mail */
/*******************************/
$("#forget").click(function() {
var action = $("#form2").attr('action');
var form_data = {
forgetemail: $("#forgetemail").val(),
is_ajax: 2
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
{
$("#message").html("<p class='error'>Link E Mail has been sent.</p>");
$("#forgetemail").val('');
}
else
$("#message").html("<p class='error'>Invalid E Mail.</p>");
}
});
return false;
});
});
</script>
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 40%;
padding: 4px;
border: 5px solid #999999;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Login</a>
<div id="light" class="white_content" align="left">
<table width="100%;" cellpadding="0" cellspacing="0">
<tr>
<td width="95%" style="background-color:#7AC7FB; height:30px; color:#333333; padding-left:10px; font:bold 14px Arial" colspan="3">Sign-In to www.pghostels.co.in</td>
<td style="background-color:#7AC7FB;" align="right" width="3%" colspan="3"><a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='none';document.getElementById('fade')
.style.display='none'">
<img src="images/close.gif">
</a></td>
</tr>
<tr>
<td style="height:30px; border-right:1px #CCCCCC dashed; text-align:center; color:#0000FF; padding-top:5px">
<div id="message" align="center" style="text-align:center"></div>
</td>
<td></td>
</tr>
<tr>
<td style="padding-left:10px; border-right:1px #CCCCCC dashed; vertical-align:top" width="30%">
<div id="">
<form id="form1" name="form1" action="doLogin.php" method="post">
<table>
<tr>
<td colspan="3" style="font:bold 14px Verdana; color:black; padding-bottom:10px">Login</td>
</tr>
<tr>
<td style="font:normal 12px Verdana; vertical-align:top; padding-top:3px;">E Mail</td>
<td style="padding:0 2px 0 2px; vertical-align:top; padding-top:3px;"></td>
<td style="padding-bottom:5px;"><input type="text" name="username" id="username" style="width:120px;" /></td>
</tr>
<tr>
<td style="font:normal 12px Verdana;">Password</td>
<td style="padding:0 2px 0 2px;"></td>
<td><input type="password" name="password" id="password" style="width:120px;" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td style="padding-top:10px;">
<input type="submit" id="login" name="login" value="" style="background:transparent url('images/login.png') no-repeat top; width: 90px; height: 29px; color:white; border:none;" /></td>
</tr>
</table>
</form>
</div>
<div id="" style="border-top: #CCCCCC dashed 1px; padding-top:8px;">
<form id="form2" name="form2" action="doForget.php" method="post">
<table>
<tr>
<td colspan="3" style="font:bold 14px Verdana; color:black; padding-bottom:10px; ">
Forget Password
</td>
</tr>
<tr>
<td style="font:normal 12px Verdana; vertical-align:top; padding-top:2px;">E Mail</td>
<td style="padding:0 2px 0 2px; vertical-align:top; padding-top:2px;"></td>
<td style="padding-bottom:5px;">
<input type="text" name="forgetemail" id="forgetemail" style="width:140px;" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td style="padding-top:10px;">
<input type="submit" id="forget" name="forget" value="" style="background:transparent url('images/sendpassword.png') no-repeat top; width: 130px; height: 29px; color:white; border:none;" /></td>
</tr>
</table>
</form>
</div>
</td>
<td style="padding:10px;width:auto; vertical-align:top;">
<table>
<tr>
<td colspan="2" style="padding-bottom:10px; color:#000000; font-size:14px; font-weight:bold;">
Benefits of Registered User</td>
</tr>
<tr>
<td style="padding-left:10px; padding-bottom:5px; font-size:12px;" valign="top">
<div style="line-height:20px; padding-left:20px;">
<ul>
<li>Get accessed by over 1 Lakh buyers</li>
<li>Showcase your property as Rental, PG or for Sale</li>
<li>Get instant queries over Phone, Email and SMS</li>
<li>Add detailed property information & multiple photos per listing</li>
<li>Preference in search & Track queries & views online</li>
</ul>
</div>
</td>
</tr>
<td style="padding-left:10px; padding-bottom:5px; font-size:12px;">
<input type="button" value="" class="register" onClick="window.location='login-register.php'">
</td>
</table>
</td>
</tr>
</table>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html> |
<a href="login-register.php"> Register</a>
</span><img src="images/phone1.png" style="padding-right:5px;" />
<span style="padding-right:103px;">+91-11-25088735 | +91-11-65780120</span>
</div>
<div align="right" style="padding-top:5px; font-size:11px; padding-right:122px;">
<img src="images/phone1.png" style="padding-right:10px;" />+91-9873448316 | +91-9999316331
</div>
<div align="right" style="padding-top:5px; font-size:11px; padding-right:182px;">
<img src="images/email_contact.png" style="padding-right:10px;" />
</div>
<div align="right" style="padding-top:5px; font-size:11px; padding-top:10px; padding-right:100px;">
<img src="images/fb.jpg" style="padding-right:10px;" />
<img src="images/tw.jpg" style="padding-right:10px;" />
<img src="images/g+.jpg" style="padding-right:10px;" />
</div>
</td>
</tr>
</table>
<div style="text-align:center; padding-bottom:3px;"><a href="book-pg-at-rs-199.php"><img border="none" src="images/strip2.gif" /></a></div> </div>
<div id="menu">
<link href="megamenu.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='src/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='src/jquery.dcmegamenu.1.2.js'></script>
<script type="text/javascript">
$(document).ready(function($){
$('#mega-menu-tut').dcMegaMenu({
rowItems: '3',
speed: 'fast'
});
});
</script>
</head>
<body>
<div class="dcjq-mega-menu">
<ul id="mega-menu-tut" class="menu">
<li><a href="pg-hostels-in-ahmedabad.php">Ahemdabad</a></li>
<li><a href="pg-hostels-in-bangalore.php">Bangalore</a></li>
<li><a href="pg-hostels-in-chennai.php">Chennai</a></li>
<li><a href="pg-hostels-in-delhi-ncr.php">Delhi-NCR</a></li>
<li><a href="pg-hostels-in-hyderabad.php">Hyderabad</a></li>
<li><a href="pg-hostels-in-noida.php">NOIDA</a></li>
<li><a href="pg-hostels-in-jaipur.php">Jaipur</a>
<li><a href="pg-hostels-in-kolkata.php">Kolkata</a>
<li><a href="pg-hostels-in-mumbai.php">Mumbai</a>
<li><a href="#"> More... </a>
<ul>
<li>
<ul>
<li><a href="pg-hostels-in-gurgaon.php">Gurgaon</a></li>
<li><a href="pg-hostels-in-chandigarh.php">Chandigarh</a></li>
<li><a href="pg-hostels-in-faridabad.php">Faridabad</a></li>
<li><a href="pg-hostels-in-jammu.php">Jammu</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="pg-hostels-in-pune.php">Pune</a></li>
<li><a href="pg-hostels-in-agra.php">Agra</a></li>
<li><a href="pg-hostels-in-panchkula.php">Panchkula</a></li>
<li><a href="pg-hostels-in-surat.php">Surat</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="pg-hostels-in-ghaziabad.php">Ghaziabad</a></li>
<li><a href="pg-hostels-in-ludhiana.php">Ludhiana</a></li>
<li><a href="pg-hostels-in-jalandhar.php">Jalandhar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
</div>
<div class="green_box" style="margin:0 auto">
<table cellpadding="0" cellspacing="0">
<tr>
<td><div style=" padding-left:5px;" >
<form method="post" action="index.php">
<table style="color:#FFFFFF;">
<tr>
<td width="137" style="padding-bottom:5px; font-size:12px; padding-left:5px;"><strong>Pg For</strong></td>
<td width="145" style="padding-bottom:5px; font-size:12px;"><strong>Select City</strong></td>
<td width="205" style="padding-bottom:5px; font-size:12px;"><strong>Select Locality</strong></td>
<td width="145" style="padding-bottom:5px; font-size:12px;"><strong>Room Type</strong></td>
<td width="109" style="padding-bottom:5px; font-size:12px;"><strong>Price Type</strong></td>
<td width="132" style="padding-bottom:5px; font-size:12px;"><strong>Price Range (Rs)</strong></td>
<td width="116" style="padding-bottom:5px; font-size:12px;"></td>
</tr>
<tr>
<td style="width:125px; padding-left:5px; vertical-align:top;">
<select name="pgfor" id="pgfor" style="width:100px;">
<option value="">-- Select --</option>
<option value="1">Male </option>
<option value="0">Female</option>
</select>
</td>
<td style="width:145px; vertical-align:top;">
<!-- <select name="city" id="city" onchange="searchshowlocality(this.value)"> -->
<select name="city" 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>
<option value="469">Chennai</option>
<option value="576">Dehradun</option>
<option value="617">Delhi</option>
<option value="156">Faridabad</option>
<option value="532">Ghaziabad</option>
<option value="651">Gurgaon</option>
<option value="8">Hyderabad</option>
<option value="453">Jaipur</option>
<option value="422">Jalandhar</option>
<option value="190">Jammu</option>
<option value="594">Kolkata</option>
<option value="457">Kota</option>
<option value="547">Lucknow</option>
<option value="424">Ludhiana</option>
<option value="661">Mangalore</option>
<option value="431">Mohali</option>
<option value="616">Mumbai</option>
<option value="335">Nashik</option>
<option value="620">Noida</option>
<option value="166">Panchkula</option>
<option value="167">Panipat</option>
<option value="85">Patna</option>
<option value="338">Pune</option>
<option value="184">Solan</option>
<option value="151">Surat</option>
<option value="464">Udaipur</option>
<option value="152">Vadodara</option>
</select> </td>
<td style="width:205px; vertical-align:top" id="slocalitydiv" >
<select id="locality" style="width:180px; vertical-align:top;">
<option value="1"> City 1 </option>
<option value="0"> City 2</option>
<option value="1"> City 3 </option>
<option value="0"> City 4</option>
</select>
</td>
<td style="width:145px; vertical-align:top;">
<select id="roomtype" name="roomtype" style="width:125px;" >
<option value="">-- Select --</option>
<option value="1">Single Sharing</option>
<option value="2">Sharing Basis</option>
</select>
</td>
<td style="width:105px; vertical-align:top">
<select id="pricetype" name="pricetype" style="width:95px; vertical-align:top;">
<option value="">-- Select --</option>
<option value="m">Monthly</option>
<option value="d">Daily</option>
</select>
</td>
<td style="width:125px; vertical-align:top">
<select style="width:115px" name="price_value[]" multiple="multiple" id="price_value" >
<option value="" selected="selected"> -- Select --</option>
<option value=" (price>=1 and price<=2000) "> Below 2000</option>
<option value=" (price>=2001 and price<=4000)"> 2001 - 4000</option>
<option value=" (price>=4001 and price<=6000)"> 4001 - 6000</option>
<option value=" (price>=6001 and price<=8000)"> 6001 - 8000</option>
<option value=" (price>=8001 and price<=10000)"> 8001 - 10000</option>
<option value=" (price>=10001)"> Above 10001</option>
</select>
</td>
<td width="116" style="vertical-align:top">
<input type="submit" name="submit" value="" style="background:transparent url('images/search (1).png') no-repeat top; width: 90px; height: 29px; color:white; border:none;" />
</td>
</tr>
</table>
</form>
</div></td>
</tr>
</table>
</div>