选择特定下拉菜单的值时获取它的值答案

【问题标题】：Get value of specific DropDown when it's value is selected选择特定下拉菜单的值时获取它的值
【发布时间】：2021-09-07 23:52:11
【问题描述】：

我正在使用 ASP.NET Core MVC。

在视图中，我有一个下拉菜单：

     @foreach (TemplateData sheet in Model)
        {
            <tr>
                <td>@sheet.ID</td>
                <td>@sheet.Warehouse</td>
                <td>@sheet.Observation</td>
                <td>@sheet.EmpName</td>
                <td>
                    @Html.DropDownList("DDLStatus", new List<SelectListItem>
                    {
                       new SelectListItem{ Text="", Value = "0" },
                       new SelectListItem{ Text="Completed", Value = "1" },
                       new SelectListItem{ Text="Declined", Value = "2" },
                       new SelectListItem{ Text="Under Review", Value = "3" }
                    }, new { @id = "DDLStatus", @onchange = @"ddlVal()" });

       
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" id="btnSubmit" value="Update Status" class="ids" data-id="@sheet.ID" onClick="sendId(@sheet.ID)" />
                </td>
            </tr>

页面上有几行，每行都有一个类似的下拉菜单。我必须从单击按钮的行中选择下拉菜单的文本。

我正在使用在按钮单击事件时触发的 Javascript 代码，但该 JS 代码只获取页面第一行的第一个 DropDown 文本。

我希望如果我点击第四个下拉菜单，只有这个文本应该存储在模型的变量中。

   function sendId(id) {
        var e = document.getElementById('DDLStatus');
        var text = e.options[e.selectedIndex].text;
        var value = DDLStatus.value;
        alert(text);
         $.ajax({
            url: '/UpdateStatus/' + id,
            type: 'GET',
            success: function() { alert('Success'); },
            error: function() { alert('Error'); }
       });
       }

** 已编辑 **

我想到了另一种方法，但不知道如何实施。我可以使用 DropDownListFor ，它可以像模型中的其他元素一样再次绑定。

为此，我在模型中添加了一个字段，如下所示：

    public StatusCode WorkStatus { get; set; }

    public enum StatusCode
    {
        Completed,
        InProgress
    }

如果我使用 DropDownListFor 可以解决问题吗？我认为它应该像我获取 sheet.ID 一样工作。

要采用这种方法，唯一的问题是如何构造一个 DropDownListFor 定义，因为它使用的是枚举。

【问题讨论】：

如果您获得多个tr，那么您就会遇到问题，因为您会获得多个具有相同 ID 的元素。 ID 应该始终是唯一的。
是的，这就是问题所在。
您的按钮在所有行的新行中？
@Swati 所有行都有按钮。当我单击按钮时，我可以获得该行的 ID。这是工作。顺便说一句，我已经在脑海中用替代方法编辑了原始帖子。

标签： javascript jquery asp.net-core asp.net-core-mvc

【解决方案1】：

您也可以在函数调用中传递this，其中this 指的是单击的当前按钮，然后使用此按钮从上一行获取您的选择框值。

演示代码：

function sendId(id, el) {
  var text = $(el).closest("tr").prev().find("select option:selected").text(); //get value of slect in previous tr
  //if on same row remove `prev()`
  console.log(text);
  //ajax call
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>Soemthins..</td>
    <td>Abc</td>
    <td>XYZ</td>
    <td>
      <select>
        <option>1</option>
        <option>2</option>
      </select>


    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Update Status" class="ids" data-id="@sheet.ID" onClick="sendId(1,this)" />
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Soemthins..</td>
    <td>Abc</td>
    <td>XYZ</td>
    <td>
      <select>
        <option>1</option>
        <option>2</option>
      </select>


    </td>
  </tr>
  <tr>
    <td>
      <!--add this as well-->
      <input type="button" value="Update Status" class="ids" data-id="@sheet.ID" onClick="sendId(2,this)" />
    </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

一种方法是将 id 放在下拉列表名称旁边并在函数中获取它

function sendId(id) {
    var e = document.getElementById('DDLStatus'+id);
    var text = e.options[e.selectedIndex].text;
    var value = DDLStatus.value;
    alert(text);
     $.ajax({
        url: '/UpdateStatus/' + id,
        type: 'GET',
        success: function() { alert('Success'); },
        error: function() { alert('Error'); }
   });
}

         @Html.DropDownList("DDLStatus"+@sheet.ID, new List<SelectListItem>
          {
             new SelectListItem{ Text="", Value = "0" },
             new SelectListItem{ Text="Completed", Value = "1" },
             new SelectListItem{ Text="Declined", Value = "2" },
             new SelectListItem{ Text="Under Review", Value = "3" }
          }, new { @id = "DDLStatus", @onchange = @"ddlVal()" });

【讨论】：