Dependent drop down list

hi,i am trying to design a form on which 2 dependent drop down list is used my code is successful but when i select class from first drop down list all the data get lossed means the value entered in fields before drop down list get blank.what can i do for this?

This is the code

<script language="JavaScript">
    function reload(form){
    var val=form.vc.options[form.vc.options.selectedIndex].value;
    self.location='vehicleRegister1.php?vc=' + val ;
    }
    </script>

    <?php
    $con=mysql_connect("localhost","root");
    if (!$con)
      {
      die('Could not connect: ' . mysql_error());
      }
     mysql_select_db("rtodb",$con); 
     ?>

    <?php
                @$cat=$_GET['vc']; 
            if(strlen($cat) > 0 and !is_numeric($cat))
            { 
            echo "Data Error";
            exit;
            }
                $sql=mysql<em>query("SELECT clsid,veh</em>class FROM vehiclass");
                if(isset($cat) and strlen($cat) > 0)
                {
                $quer=mysql<em>query("SELECT sbcid,veh</em>subclass FROM vehisubcls WHERE clsid = $cat");
                }
                echo "<select name='vc' onchange=\"reload(this.form)\">";
                echo "<option value=''>Select One</option>";
                while ($data=mysql<em>fetch</em>assoc($sql)){
                if($data['clsid']==$cat)
                {
                    echo "<option selected value='$data[clsid]'>$data[veh_class]</option>"."&lt;BR>";
                }
                else
                {
                    echo  "<option value='$data[clsid]'>$data[veh_class]</option>";}
                } <br />
                echo "</select>";

     echo "&lt;/td&gt;";        
          echo "&lt;/tr&gt;";
          echo "&lt;tr&gt;";
            echo "&lt;td height='31' id='t3'&gt;"; echo "Vehicle Sub-Class"; echo "&lt;/td&gt;";
            echo "&lt;td&gt;";
            echo "&lt;select name='vsb'&gt;&lt;option value=''&gt;Select one&lt;/option&gt;";
            while($data1 = mysql_fetch_array($quer)) { 
            echo  "&lt;option value='$data1[veh_subclass]'&gt;$data1[veh_subclass]&lt;/option&gt;";
            }
            echo "&lt;/select&gt;";

            ?&gt;
      &lt;/td&gt;
          &lt;/tr&gt;


            &lt;td height="36" id="t3"&gt;Dealer Name &lt;/td&gt;
            &lt;td&gt;&lt;select name="dnm"&gt;
            &lt;?php 
            $sql="SELECT dealer_id,dealer_nm FROM dealer ORDER BY dealer_nm";
            $result =mysql_query($sql);
            while ($data=mysql_fetch_assoc($result)){
            ?&gt;
            &lt;option value ="&lt;?php echo $data['dealer_id'] ?&gt;" &gt;&lt;?php echo $data['dealer_nm'] ?&gt;&lt;/option&gt;
            &lt;?php } ?&gt;

            &lt;/select&gt;

View Answers

January 25, 2011 at 11:28 AM

Hi Friend,

Try this:

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`));

Thanks

January 25, 2011 at 7:55 PM

Thank You Very much Please send me code in php

September 8, 2011 at 6:52 PM

Hi everybody! The posted code was been very useful for me, but I have a question: how is possible to manage four dropdown dependnt list?

Thanks a lot. regards

Nico