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

Question

首先，我是 html 和 javascript 新手，所以请放轻松:)

我有一个 html 表格，其中每一行都有一个下拉列表(具有相同的选项)和一个按钮。单击按钮时，我想将下拉/选择中所选项目的文本以及另一个字符串传递给 Controller ​​。

到目前为止我已经

        <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>

显然，这是我的代码的精简和修改版本。实际上，我在模型的每一行中都有更多属性。

据我了解，我目前遇到一个 ID 问题，因为对于所有行，我的选择都有相同的 ID。如果没有为每一行添加一个脚本，我想不出解决这个问题的方法，它会起作用(我认为)，但会不优雅(表的每一行中都有一个 foreach，然后在表标记之外分配一个脚本到每行的下拉菜单)

最重要的是，我缺少调用我的脚本来获取文本，然后在单击按钮时将其传递到 Controller 的位。

理想情况下，我想将整个行对象传递给 Controller ​​，但我现在有一个解决方法，只需要字符串firstName。

模型中只有一个 Names 集合(而不是模型中的每一行都有一个)用于表中的每一行，因为每个表的选项始终相同。

Answer 1

在 html 代码顶部包含 jQuery

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

然后在代码底部添加以下代码:

<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>