title: Dynamically populate drop down list in JSP with data in database
body: <p>I'm dynamically generating elements with button click as below.</p>
  
  <p><strong>javascript which helps in generating multiple table rows</strong></p>
  
  <pre><code>&lt;SCRIPT language="javascript"&gt;
          function addRow(tableID) {
              var table = document.getElementById(tableID);    
              var rowCount = table.rows.length;
              var row = table.insertRow(rowCount);
  
              var cell1 = row.insertCell(0);
              var element1 = document.createElement("input");
              element1.type = "checkbox";
              element1.name = "checkbox";
              cell1.appendChild(element1);
  
              var cell2 = row.insertCell(1);
              var element2 = document.createElement("input");
              element2.type = "text";
              element2.name = "car";
              cell2.appendChild(element2);
  
              var cell3 = row.insertCell(2);
              var element3 = document.createElement("select");
              element3.name = "group";                        
              cell3.appendChild(element3);    
          }    
  &lt;/SCRIPT&gt;
  </code></pre>
  
  <p><strong>Html</strong> </p>
  
  <pre><code>&lt;form name="frm01" action="#" method="post"&gt;
  
      &lt;TABLE id="tblData" width="300px" border="0"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;b&gt;Car&lt;/b&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;b&gt;Group&lt;/b&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;INPUT type="button" value="Add Row"
                  onclick="addRow('tblData')" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/TABLE&gt;
  
      &lt;br&gt; &lt;input type="submit" value="submit" name="submit"&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Output looks like below.</p>
  
  <p><img src="https://i.stack.imgur.com/WRAmQ.jpg" alt="form elements"></p>
  
  <p>I have a table in database as <strong>car_groups</strong> with columns <strong>grp_id, grp_name</strong>. I need to dynamically populate drop down in above with values in <strong>car_groups</strong> table.</p>
  
  <p>Dynamically generated drop down should as below. <code>grp_id</code> as <strong>value</strong> and <code>grp_name</code> as <strong>display</strong>.</p>
  
  <pre><code>&lt;select id="grp_select" name="grp_select"&gt;
   &lt;option&gt;&lt;/option&gt;
   &lt;option value="1"&gt;Group A&lt;/option&gt;
   &lt;option value="2"&gt;Group B&lt;/option&gt;
   &lt;option value="3"&gt;Group C&lt;/option&gt;                             
  &lt;/select&gt;
  </code></pre>
  
  <p>How can i achieve this ?</p>