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. <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</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>