title: Dynamically adding a table of drop down lists using JS
body: <p>I want to create a table of drop down lists dynamically.
  Here is the procedure:
  1) A select box appears with few options in the first cell of first row in a table.
  2) When the user clicks on an option, another select box appears in the second cell of the first row.
  3) In the third cell, there has to be a button clicking on which will add a new row with the select box as said in 1st point.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Search&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          var noRows = 1;
          function func(){
              var t = document.getElementById('searchTable');
              var r = table.insertRow(noRows);
              var col = row.insertCell(0);
              var colNames = document.createElement('select');
              colNames.id = 'colNames0';
              colNames.name = 'colNames' + noRows;
              colNames.onchange = populate;
              colNames.options[0] = new Option('Select','');
              for(var i = 0;i &lt; cols.length;++i){
                  colNames.options[i+1] = new Option(cols[i],ids[i]);
              }
              colCell.appendChild(colNames);
          }
          function populate(){
              var sel = document.getElementById("colNames" + noRows);
              var col = sel.options[sel.selectedIndex].id;
              if(col == "int"  || col == "date" || col == "time")
                  populateInt();
              else
                  populateString();
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="func();"&gt;
      &lt;table id="searchTable"&gt;
      &lt;/table&gt;    
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the code I began with. I created the select box dynamically in first cell of first row but unable to get the selected option and create the further select lists.</p>