单击按钮时如何获取选择文本，表格单元格值

Question

First off I'm new to html and javascript so please go easy :)

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.

So far I have

        <table>
            <tr>
                <td>First name</td>
                <td>Surname</td>
            </tr>
            @foreach (var row in Model.Rows)
            {
                <tr>
                    <td>@row.FirstName</td>
                    <td>
                        <select id="surnames">
                            @foreach (var name in Model.Surnames)
                            {
                                <option value=@name.ToString()>@name.ToString()</option>
                            }
                        </select>
                    </td>
                    <td><input type="button" id="myButton" value="Go" onclick="location.href='@Url.Action("MyAction", "MyController", new { @firstName = row.FirstName, @newSurname = ??? })'" /></td>
                </tr>
            }
        </table>

        <script>
            function getSelectedVersion() {
                var version = document.getElementById("surnames").text;
            }
        </script>

Obviously, this is a trimmed down and modified version of my code. In practise I have more properties in each Row in the Model.

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)

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.

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.

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.

Answer 1

Include jQuery at the top of your html code

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Then at the bottom of your code add this code:

<script>
  $("input[type=button]").on("click", function(){ 
  var FIRSTNAME  = ($(this).parent().prev().prev()).html(); 
  //alert(FIRSTNAME);
  var   NEWSURNAME  = ($(this).parent().prev().children().attr("selected", "selected")).val(); 
  //alert(NEWSURNAME);
  $.post("/MyController/MyAction", { firstName: FIRSTNAME, newSurname: NEWSURNAME } );  
});
</script>

Answer 2

可能是这样吗？

<input type="button" onclick="location.href='@Url.Action("MyAction", "MyController", new {})' + '?' + 'newSurname='+getSelectedVersion()"/>