title: How to get select text, table cell value when a button is clicked
body: <p>First off I'm new to html and javascript so please go easy :)</p>
  
  <p>I have a table in html, in which each row has a dropdown (with the same options) and a button. On clicking the button I would like to pass to a controller the text of the selected item in the dropdown/select along with another string.</p>
  
  <p>So far I have</p>
  
  <pre><code>        &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;First name&lt;/td&gt;
                  &lt;td&gt;Surname&lt;/td&gt;
              &lt;/tr&gt;
              @foreach (var row in Model.Rows)
              {
                  &lt;tr&gt;
                      &lt;td&gt;@row.FirstName&lt;/td&gt;
                      &lt;td&gt;
                          &lt;select id="surnames"&gt;
                              @foreach (var name in Model.Surnames)
                              {
                                  &lt;option value=@name.ToString()&gt;@name.ToString()&lt;/option&gt;
                              }
                          &lt;/select&gt;
                      &lt;/td&gt;
                      &lt;td&gt;&lt;input type="button" id="myButton" value="Go" onclick="location.href='@Url.Action("MyAction", "MyController", new { @firstName = row.FirstName, @newSurname = ??? })'" /&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              }
          &lt;/table&gt;
  
          &lt;script&gt;
              function getSelectedVersion() {
                  var version = document.getElementById("surnames").text;
              }
          &lt;/script&gt;
  </code></pre>
  
  <p>Obviously, this is a trimmed down and modified version of my code. In practise I have more properties in each Row in the Model.</p>
  
  <p>As I understand it I currently have an ID issue in that for all the rows I have the same id for the select. Short of adding a script for each row I can't think of a way round this, it would work (I think) but would be inelegant (a foreach in each row of the table, then one outside the table tags to allocate a script to each row's dropdown)</p>
  
  <p>On top of that I'm missing the bit that calls my script to get the text and then pass it into the controller on the button click.</p>
  
  <p>Ideally I would like to pass the entire row object to the controller, but I have a work around for that just now and just need the string firstName.</p>
  
  <p>There is only one Names collection in the model (as opposed to one in each Row in the model) that is used for each row in the table, because the options will always be the same for each table.</p>