in this my problem related to :
when i select state MP then i wil open the its corresponding city but in database it only stores the option value no like MP at option value 10 then it will stores the 10 for city becuz it wil call the correspndng array[10] in MS Access database
<html> <head> <script language="javascript"> var arr = new Array(); arr[0] = new Array("-select-"); arr[1] = new Array("Adilabad","Anantapur","Chittoor","Cuddapah","East Godavari","Guntur","Hyderabad","Karimnagar","Khammam","Krishna","Mahbubnagar","Medak","Nalgonda","Nellore","Nizamabad","Prakasam","Rangareddy","Secundrabad","Srikakulam","Tirupati","Vijayawada","Visakhapatnam","Vizianagaram","Warangal","West Godavari"); arr[2] = new Array("Anjaw","Changlang","East Kameng","East Siang","Kurung Kumey","Lohit","Lower Dibang Valley","Lower Subansiri","Papum Pare","Tawang","Tirap"," Upper Dibang Valley","Upper Siang","Upper Subansiri","West Kameng","West Siang"); arr[3] = new Array("Barpeta","Bongaigaon","Cachar","Darrang","Dhemaji","Dhubri","Dibrugarh","Goalpara","Golaghat","Guwahati(Dispur)","Hailakandi","Jorhat","Kamrup","Karbi Anglong","Karimganj","Kokrajhar","Lakhimpur","Marigaon","Nagaon","Nalbari","North Cachar Hills","Sivasagar","Sonitpur","Tinsukia","Udalguri"); arr[4] = new Array("Araria","Arwal","Aurangabad","Banka","Begusarai","Bhagalpur","Bhojpur ( Arrah )","Buxar","Darbhanga","East Champaran","Gaya","Gopalganj","Jamui","Jehanabad","Kaimur (Bhabua)","Katihar","Khagaria","Kishanganj","Lakhisarai","Madhepura","Madhubani","Munger","Muzaffarpur","Nalanda","Nawada","Patna","Purnia","Rohtas","Saharsa","Samastipur","Saran","Sheikhpura","Sheohar","Sitamarhi","Siwan","Supaul","Vaishali","West Champaran"); arr[5] = new Array("chandigarh"); function change(combo1){ var comboValue = combo1.value; document.forms["form1"].elements["combo2"].options.length=0; for (var i=0;i<arr[comboValue].length;i++){ var option = document.createElement("option"); option.setAttribute('value',i+1); option.innerHTML = arr[comboValue][i]; document.forms["form1"].elements["combo2"].appendChild(option); } } </script> </head> <body> <form name=form1 action="reg.jsp" onsubmit="return validateForm()" method="post" > <table width="425" border="0" cellspacing="0" cellpadding="3"> <tr><td width="5px" height=" 26px"></td><td height="26px" width="326px"> <span id="lblState">State</span></td> <td width=" 193px" height=" 26px"> <select name="ddlstState" onchange="javascript:setTimeout('__doPostBack(\'ddlstState\',\'\')', 0)" id="ddlstState" class="txtBox" width="119px"> <option selected=3D"selected" value="0">-State-</option> <option value="Andhra Pradesh">Andhra Pradesh</option> <option value="Arunachal Pradesh">Arunachal Pradesh</option> <option value="Assam">Assam</option> <option value="Bihar">Bihar</option> <option value="Chandigarh">Chandigarh</option> </select></td> <select name="combo2" > </select> <td width="200px" height="26px"></td></tr> <tr><td width="5px"></td><td width=" 326px"> <span id="lblCity">City/District </span></td> <td width=" 193px"> <select name="ddlstCity" id="ddlstCity" class="txtBox" width="119px"> <option value="0">-City/District-</option> </select></td> <td width="200px"></td></tr> <td width=" 193px"> <input type="submit" name="submit" id="submit" value="Submit" /> <input type="submit" name="Cancel" id="Cancel" value="Cancel" /> </td> </tr> </form> </body> </html>
1)country.jsp:
<%@page import="java.sql.*"%> <html> <head> <script language="javascript" type="text/javascript"> var xmlHttp var xmlHttp function showState(str){ if (typeof XMLHttpRequest != "undefined"){ xmlHttp= new XMLHttpRequest(); } else if (window.ActiveXObject){ xmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlHttp==null){ alert("Browser does not support XMLHTTP Request") return; } var url="state.jsp"; url +="?count=" +str; xmlHttp.onreadystatechange = stateChange; xmlHttp.open("GET", url, true); xmlHttp.send(null); } function stateChange(){ if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ document.getElementById("state").innerHTML=xmlHttp.responseText } } </script> </head> <body> <select name='country' onchange="showState(this.value)"> <option value="none">Select</option> <% Class.forName("com.mysql.jdbc.Driver").newInstance(); Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root"); Statement stmt = con.createStatement(); ResultSet rs = stmt.executeQuery("Select * from country"); while(rs.next()){ %> <option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option> <% } %> </select> <br> <div id='state'> <select name='state' > <option value='-1'></option> </select> </div> </body> </html>
2)state.jsp:
<%@page import="java.sql.*"%> <% String country=request.getParameter("count"); String buffer="<select name='state' ><option value='-1'>Select</option>"; try{ Class.forName("com.mysql.jdbc.Driver").newInstance(); Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root"); Statement stmt = con.createStatement(); ResultSet rs = stmt.executeQuery("Select * from state where countryid='"+country+"' "); while(rs.next()){ buffer=buffer+"<option value='"+rs.getString(1)+"'>"+rs.getString(3)+"</option>"; } buffer=buffer+"</select>"; response.getWriter().println(buffer); } catch(Exception e){ System.out.println(e); }
%>
For the above code, we have created two database tables:
CREATE TABLE `country` ( `countryid` bigint(255) NOT NULL auto_increment, `countryname` varchar(255) default NULL, PRIMARY KEY (`countryid`)); CREATE TABLE `state` ( `stateid` bigint(255) NOT NULL auto_increment, `countryid` int(255) default NULL, `state` varchar(255) default NULL, PRIMARY KEY (`stateid`));