title: How do I check if a cell has a select element in a Javascript loop?
body: <p>I have a dynamically created table which is generated through a JS <code>addRow</code> function. I would like to loop through this table and check if the cell has a <em>select</em> element in it. If it does then I would like to push the value of the selected option to a dictionary called <code>ingredient_dict</code>.</p>
  
  <p>This is what I have so far:</p>
  
  <pre class="lang-js prettyprint-override"><code>var table = document.getElementById('selected_ingredients');
  var rowCount = table.rows.length;
  //table width by counting headers minus the last cell which has a delete button
  var cellsCount = table.rows[0].cells.length -1 ; 
  
  //loop through all rows (r) in table
  for (var r = 1; r &lt; rowCount; r++) { 
      //initiate dictionary for this ingredient
      var ingredient_dict = {};
  
      //loop through each cell (c) in row
      for (var c = 0; c &lt; cellsCount; c++) { 
          var $cell = table.rows[r].cells[c];
  
           if (**CHECK IF CELL HAS A SELECT ELEMENT**) {
               $ingredient_dict["UOM"] = $cell.options[$cell.selectedIndex].value
  
           } else if (**CHECK IF CELL HAS INPUT ELEMENT**) {
               $ingredient_dict["qty"] = $cell.value
           } else {
               $ingredient_dict["name"] = $cell.value
           }
      }
  }
  </code></pre>
  
  <p>I'm not sure if it matters but this is the code in my <code>addRow</code> function to dynamically create the select element: </p>
  
  <pre class="lang-js prettyprint-override"><code>// ingredient unit of measurement drop down
  var cell3= row.insertCell(2);
  var unit_of_measure = document.createElement("select");
  unit_of_measure.name = "unit_of_measure_select";
  cell3.appendChild(unit_of_measure);
  </code></pre>
  
  <p>I'm pretty new to javascript so I apologize if my code is messy or if this is an obvious question!</p>