选择特定 DropDown 的值时获取其值

Question

我正在使用 ASP.NET 核心 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>

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

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

我希望如果我点击第四个 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 定义。

Answer 1

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

演示代码 :

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>

Answer 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()" });

选择特定 DropDown 的值时获取其值

Get value of specific DropDown when it's value is selected

javascript

jquery

asp.net-core-mvc

asp.net-core