title: HTML dynamic table with a column of <select> options - how to extract <select> values
body: <p>I have a dynamic table, that I create with this function:</p>
  
  <pre><code>function addRow(v1,v2)
  {
         if (!document.getElementsByTagName) return;
         tabBody=document.getElementsByTagName("tbody").item(0);
         row=document.createElement("tr");
         cell1 = document.createElement("td");
         cell2 = document.createElement("td");
         cell3 = document.createElement("td");
         textnode1=document.createTextNode(v1);
         textnode2=document.createTextNode(v2);
         select = document.createElement('select');
         option1 = document.createElement("option");
         option1.setAttribute('value', "op1");
         option1.appendChild(document.createTextNode("op1"));
         select.appendChild(option1);
         option2 = document.createElement("option");
         option2.setAttribute('value', "op2");
         option2.appendChild(document.createTextNode("op2"));
         select.appendChild(option2);
         option3 = document.createElement("option");
         option3.setAttribute('value', "combine");
         option3.appendChild(document.createTextNode("Combine"));
         select.appendChild(option3);
         cell1.appendChild(textnode1);
         cell2.appendChild(textnode2);
         cell3.appendChild(select)
         row.appendChild(cell1);
         row.appendChild(cell2);
         row.appendChild(cell3);
         tabBody.appendChild(row);
  }
  </code></pre>
  
  <p>I'm extracting the table values:        </p>
  
  <pre><code>var values = $('#difftable td') 
       .map(function(i, e){    
       return e.innerText; 
       })
       .get();
  </code></pre>
  
  <p>I'm getting values from first 2 columns, but not the select tag values from the third column. How can I find these values from the select tags ?</p>