title: Select a value from a table using a dropdown menu
body: <p>I'm trying to select a value from a table based on a value in a dropdown menu. I have this so far:</p>
  
  <pre><code>&lt;table class="table table-striped table-hover table-bordered table-responsive" id="rates"&gt;
      &lt;thead&gt;
          &lt;tr style="background-color: "&gt;&lt;th&gt;State&lt;/th&gt;&lt;th&gt;Fee1&lt;/th&gt;&lt;th&gt;Fee2&lt;/th&gt;&lt;th&gt;Fee3&lt;/th&gt;&lt;th&gt;Fee4&lt;/th&gt;&lt;th&gt;Fee5&lt;/th&gt;&lt;th&gt;Fee6&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="rates"&gt;
          &lt;tr&gt;&lt;td id="AR"&gt;Arkansas&lt;/td&gt;&lt;td id="AR_F1"&gt;.04&lt;/td&gt;&lt;td id="AR_F2"&gt;0.00&lt;/td&gt;&lt;td id="AR_F3"&gt;0.00&lt;/td&gt;&lt;td id="AR_F4"&gt;0.00&lt;/td&gt;&lt;td id="AR_F5"&gt;0.00&lt;/td&gt;&lt;td id="AR_F6"&gt;0.00&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td id="AZ"&gt;Arizona&lt;/td&gt;&lt;td id="AZ_F1"&gt;.03&lt;/td&gt;&lt;td id="AZ_F2"&gt;0.002&lt;/td&gt;&lt;td id="AZ_F3"&gt;0.00&lt;/td&gt;&lt;td id="AZ_F4"&gt;0.00&lt;/td&gt;&lt;td id="AZ_F5"&gt;0.00&lt;/td&gt;&lt;td id="F6_O"&gt;0.00&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td id="CA"&gt;California&lt;/td&gt;&lt;td id="CA_F1"&gt;.03&lt;/td&gt;&lt;td  id="CA_F2"&gt;0.002&lt;/td&gt;&lt;td id="CA_F3"&gt;0.00&lt;/td&gt;&lt;td id="CA_F4"&gt;0.00&lt;/td&gt;&lt;td id="CA_F5"&gt;0.00&lt;/td&gt;&lt;td id="CA_F6"&gt;0.00&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;&lt;br/&gt;
  
  &lt;select id="stateSel"&gt;
        &lt;option value="Arkansas"&gt;Arkansas&lt;/option&gt;
        &lt;option value="Arizona"&gt;Arizona&lt;/option&gt;
        &lt;option value="California"&gt;California&lt;/option&gt;
      &lt;/select&gt;&lt;br/&gt;
  
  &lt;table class="table table-bordered"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;&lt;td&gt;&lt;h4&gt;Tax Calculator&lt;/h4&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;Fee1:&lt;/th&gt;&lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;Fee2:&lt;/th&gt;&lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;Fee3:&lt;/th&gt;&lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;Fee4:&lt;/th&gt;&lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;Total:&lt;/th&gt;&lt;td&gt;&lt;input type="text" id="totalAmount"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br/&gt;
  &lt;button onclick="myFunction()"&gt;Calculate&lt;/button&gt;
  </code></pre>
  
  <p>My script so far is this: </p>
  
  <pre><code>&lt;script&gt; 
  
  
  function myFunction() {
      var x = document.getElementById("stateSel").selectedIndex;
      var y = document.getElementById("stateSel").options;
      var rowIndex = y[x];
      var fee1 = document.getElementById("rates").rows[rowIndex.index + 1].cells[2].value;
  
      alert(fee1.index);
  }
   &lt;/script&gt;
  </code></pre>
  
  <p>I'm using the alert to see if I can select a value from the table with rates. I keep getting an undefined value. Later, I want to use that value (from an appropriate row and column), along with other similarly selected values, to build a fee calculator. Help me get the values from table's rows and columns please. </p>