title: How to get the value of <select> inside <td> only if <select> tag presents?
body: <p>I have an HTML page with its associated js file. the purpose is to convert data inserted into the table into a JSON file. User can edit table cells, and click the button so Javascript file parses the data and send it as an Ajax request to a PHP file on the server. The PHP file then stores the data as a file on the server and sends the link back.
  For the  tags, I need to use val() instead of text() to get the selected value. However, val() returns an empty string. How to make it return value correctly?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $TABLE = $('#table');
  var $BTN = $('#export-btn');
  var $EXPORT = $('#export');
  
  $('.table-add').click(function () {
    var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
    $TABLE.find('table').append($clone);
  });
  
  $('.table-remove').click(function () {
    $(this).parents('tr').detach();
  });
  
  $('.table-up').click(function () {
    var $row = $(this).parents('tr');
    if ($row.index() === 1) return; // Don't go above the header
    $row.prev().before($row.get(0));
  });
  
  $('.table-down').click(function () {
    var $row = $(this).parents('tr');
    $row.next().after($row.get(0));
  });
  
  // A few jQuery helpers for exporting only
  jQuery.fn.pop = [].pop;
  jQuery.fn.shift = [].shift;
  
  $BTN.click(function () {
   //alert("ok");
    var $rows = $TABLE.find('tr:not(:hidden)');
    var headers = [];
    var data = [];
    
    // Get the headers (add special header logic here)
    $($rows.shift()).find('th:not(:empty)').each(function () {
      headers.push($(this).text().toLowerCase());
    });
    
    // Turn all existing rows into a loopable array
    $rows.each(function () {
      var $td = $(this).find('td');
      var h = {};
      // Use the headers from earlier to name our hash keys
      headers.forEach(function (header, i) {
        h[header] = $td.eq(i).val();  
    alert($td.eq(i).val());
      });
      
      data.push(h);
    });
    
    // Output the result
    normaldata = JSON.stringify(data);
    $.ajax({
        type: "POST",
        url: "filemaker.php",
        data:  {"data":normaldata},
        success: function(output) {
  
           
    var a = document.createElement('a');
    a.href = 'data.gmp'
    a.download = "data.gmp";
    a.click();
    //alert("reached here");
      }
  });
  
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table-editable {
    position: relative;
  }
  .table-editable .glyphicon {
    font-size: 20px;
  }
  
  .table-remove {
    color: #700;
    cursor: pointer;
  }
  .table-remove:hover {
    color: #f00;
  }
  
  .table-up, .table-down {
    color: #007;
    cursor: pointer;
  }
  .table-up:hover, .table-down:hover {
    color: #00f;
  }
  
  .table-add {
    color: #070;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 0;
  }
  .table-add:hover {
    color: #0b0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" &gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;HTML5 Editable Table&lt;/title&gt;
    
    
   &lt;link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'&gt;
  &lt;link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'&gt;
  
        &lt;link rel="stylesheet" href="css/style.css"&gt;
  
    
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;a href='text.html' &gt;aa&lt;/a&gt;
    &lt;div class="container"&gt;
    &lt;h1&gt;HTML5 Editable Table&lt;/h1&gt;
    &lt;p&gt;Through the powers of &lt;strong&gt;contenteditable&lt;/strong&gt; and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.&lt;/p&gt;
    
    &lt;ul&gt;
      &lt;li&gt;An editable table that exports a hash array. Dynamically compiles rows from headers&lt;/li&gt; 
      &lt;li&gt;Simple / powerful features such as add row, remove row, move row up/down.&lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;div id="table" class="table-editable"&gt;
      &lt;span class="table-add glyphicon glyphicon-plus"&gt;&lt;/span&gt;
      &lt;table class="table"&gt;
        &lt;tr&gt;
          &lt;th&gt;Type&lt;/th&gt;
          &lt;th&gt;Doctor&lt;/th&gt;
          &lt;th&gt;Specialization&lt;/th&gt;
          &lt;th&gt;City&lt;/th&gt;
          &lt;th&gt;Area&lt;/th&gt;
          &lt;th&gt;Rank&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td contenteditable="true"&gt; 
    &lt;select&gt; 
     &lt;option value='pharmacist'&gt;Pharmacist&lt;/option&gt;
     &lt;option value='doctor'&gt;Doctor&lt;/option&gt;
    &lt;/select&gt;
     &lt;/td&gt;
          &lt;td contenteditable="true"&gt;stir-fry&lt;/td&gt;
          &lt;td contenteditable="true"&gt;stir-fry&lt;/td&gt;
          &lt;td contenteditable="true"&gt;stir-fry&lt;/td&gt;
          &lt;td contenteditable="true"&gt;stir-fry&lt;/td&gt;
           &lt;td contenteditable="true"&gt; 
    &lt;select&gt; 
     &lt;option value='A+'&gt;A+&lt;/option&gt;
     &lt;option value='A'&gt;A&lt;/option&gt;
     &lt;option value='B'&gt;B&lt;/option&gt;
     &lt;option value='C'&gt;C&lt;/option&gt;
    &lt;/select&gt;
     &lt;/td&gt;
          &lt;td&gt;
            &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
          &lt;/td&gt;
      
        &lt;/tr&gt;
        &lt;!-- This is our clonable table line --&gt;
        &lt;tr class="hide"&gt;
      &lt;td contenteditable="true"&gt; 
    &lt;select&gt; 
     &lt;option value='pharmacist'&gt;Pharmacist&lt;/option&gt;
     &lt;option value='doctor'&gt;Doctor&lt;/option&gt;
    &lt;/select&gt;
     &lt;/td&gt;
          &lt;td contenteditable="true"&gt;stir-fry&lt;/td&gt;
          &lt;td contenteditable="true"&gt;stir-fry&lt;/td&gt;
          &lt;td contenteditable="true"&gt;stir-fry&lt;/td&gt;
          &lt;td contenteditable="true"&gt;stir-fry&lt;/td&gt;
          &lt;td contenteditable="true"&gt; 
    &lt;select&gt; 
     &lt;option value='A+'&gt;A+&lt;/option&gt;
     &lt;option value='A'&gt;A&lt;/option&gt;
     &lt;option value='B'&gt;B&lt;/option&gt;
     &lt;option value='C'&gt;C&lt;/option&gt;
    &lt;/select&gt;
     &lt;/td&gt;
          &lt;td&gt;
            &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
          &lt;/td&gt;
   
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    
    &lt;button id="export-btn" class="btn btn-primary"&gt;Export Data&lt;/button&gt;
    &lt;p id="export"&gt;&lt;/p&gt;
  &lt;/div&gt;
    &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'&gt;&lt;/script&gt;
  &lt;script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'&gt;&lt;/script&gt;
  &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'&gt;&lt;/script&gt;
  
    
  
      &lt;script  src="js/index.js"&gt;&lt;/script&gt;
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>