title: Adding values dynamically to a drop down from mysql database using jsp
body: <p>I need help in adding the values to a drop down dynamically from mysql database.</p>
  
  <p><strong>Work Flow:</strong></p>
  
  <p>In my jsp page,</p>
  
  <p>1.Country name is a session attribute from a servlet</p>
  
  <p>2.Sate is an autocomplete text box</p>
  
  <p>3.District is a drop down.</p>
  
  <p>Based on the country name the State text box will be filled through autocomplete and the district name is a drop down where the district names should be added  to the drop down dynamically</p>
  
  <p><strong>Issue:</strong></p>
  
  <p>I need to add the values of the district names into my drop down list based on the location and the state.</p>
  
  <p>My db query is <code>"Select district from locationlist where country='"+country+"'and state='"+state+"'";</code></p>
  
  <p>Here in the 'where' condition the country and the state values should be passed from my jsp page. </p>
  
  <p>Kindly help me in adding the values to the drop down menu present in my jsp page(Location.jsp),based on my requirements.</p>
  
  <p>This is my code</p>
  
  <p><strong>Location.jsp</strong></p>
  
  <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;title&gt;Location&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="CSS/style1.css" /&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript" src="JS/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="JS/jquery.autocomplete.js"&gt;&lt;/script&gt;
  &lt;script&gt;
       jQuery(function(){
              $("#state").autocomplete("Statelist.jsp");
        });
  &lt;/script&gt;  
  &lt;script type="text/javascript"&gt;        
          function addRow(tableID) {
  
              var table = document.getElementById(tableID);
  
              var rowCount = table.rows.length;
              var row = table.insertRow(rowCount);
  
              var colCount = table.rows[0].cells.length;
  
              for(var i=0; i&lt;colCount; i++) {
  
                  var newcell = row.insertCell(i);
  
                  newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                  //alert(newcell.childNodes);
                  switch(newcell.childNodes[0].type) {
                      case "text":
                              newcell.childNodes[0].value = "";
  
                              jQuery(function(){
              $('input[name="state"]').autocomplete("Statelist.jsp");
                           });
                           break;
  
                      case "select-one":
                              newcell.childNodes[0].selectedIndex = 0;
                              break;
                  }
  
              }
  
          }
  
          function deleteRow(tableID) {
  
              try {
  
              var table = document.getElementById(tableID);
  
         var rowDelete = table.rows.length - 1;
  
         if (rowDelete &gt; 1)
  
             table.deleteRow(rowDelete);
  
         else
  
           alert("Cannot delete all the rows.")
  
  
              }
              catch(e) {
                  alert(e);
              }
          }
      &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;h1&gt;&lt;font face="Times New Roman" align="center"&gt;Form&lt;/font&gt;&lt;/h1&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;h5&gt;&lt;font color="blue"&gt; Country: &lt;% String country=(String)session.getAttribute("country");
         out.print(country); %&gt;  
         &lt;c:set var="country" value="country" scope="session"  /&gt;&lt;/font&gt; &lt;/h5&gt;
  &lt;br/&gt;
  &lt;div&gt;
  &lt;center&gt;
      &lt;form&gt;
  
        &lt;input type="button" id="button" value="Add Row" onclick="addRow('dataTable')"  /&gt;
  
      &lt;input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /&gt;
      &lt;input type="button" value="Save"/&gt;
      &lt;br/&gt;
      &lt;br/&gt;
  
       &lt;table id="dataTable" align="center" width="350px" border="1"&gt;
  
     &lt;tr&gt;
          &lt;th&gt;State&lt;/th&gt;
          &lt;th&gt;District&lt;/th&gt;
  
      &lt;/tr&gt;
  
      &lt;tr&gt;
  
     &lt;td&gt; &lt;input type="text" class="auto" id="state" name="state"/&gt;&lt;/td&gt; &amp;nbsp;
      &lt;td&gt;&lt;select name="district"/&gt;
      &lt;option value="select"&gt;SELECT&lt;/option&gt;
    &lt;/select&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/form&gt;
  &lt;/center&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>