How to make multiple dependent TextBox on Dropdown value from database in jsp

Question

Please I need your help for how to make dependent Textbox on Dropdown value that come form database in Jsp. Below code work fine with one textbox.But i don't know how to make multiple dependent Textbox.So help me.

Thanks.

tender.jsp:  

<%
     Connection conn = null;
     Statement st = null;
     ResultSet rs = null;*
     conn = JDBCConnectionUtil.getConnection();

     if(conn != null)
     {
        try
        {
            String woodSQL = "select fsa_wood_type_master_wood_type, fsa_wood_type_master_wood_weight,fsa_wood_type_master_wood_length,fsa_wood_type_master_wood_width,fsa_wood_type_master_wood_standard_rate from fsa_wood_type_master";

st = conn.createStatement();
  rs = st.executeQuery(woodSQL);
                   }
      catch(SQLException e)
      {
          e.printStackTrace();
      }
      }
  %>

        <td>
    <select id="woodType" onchange="populateWoodId();">

    <%while(rs.next()){ %>

            <option value="<%=rs.getString(1) %>"><%=rs.getString(2) %></option>
        <%} %>
    </select>
    <input id="woodHeight" type="text" value="" />
</td>

}

JavaScrip:

function populateWoodId(){
    var selectBox = document.getElementById('woodType');

    /* selected value of dropdown */
    var woodHeight = selectBox.options[selectBox.selectedIndex].value;

    /* selected value set to input field */
    document.getElementById('woodHeight').value = woodHeight; 
}

Answer 1

Change you option tag line like this :

<option value='<%=rs.getString(1)+"#"+rs.getString(2)+"#"+rs.getString(3)+"#"+rs.getString(4)+"#"+rs.getString(5) %>'><%=rs.getString(2) %></option>

and in your javascript do like this :

function populateWoodId(){
    var selectBox = document.getElementById('woodType');

    /* selected value of dropdown */
    var woodProp = selectBox.options[selectBox.selectedIndex].value;

    /* selected value set to input field */
    var splitVal=woodProp.split("#",5);
    document.getElementById('woodHeight').value = splitVal[0]; 
    document.getElementById('woodHeight1').value = splitVal[1]; 
    document.getElementById('woodHeight2').value = splitVal[2]; 
    document.getElementById('woodHeight3').value = splitVal[3]; 
    document.getElementById('woodHeight4').value = splitVal[4]; //five different textboxes

}