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

Question

I am using ASP.NET Core MVC.

In View, I have a DropDown:

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

There are several rows on the page and each row has a similar DropDown. I have to pick Text of the DropDown from the row where the button was clicked.

I am using this Javascript code which fires at the button-click event, but this JS code only gets the first DropDown text which is the first row of the page.

I want that if I click fourth DropDown, only this text should be stored in a variable of model.

   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'); }
       });
       }

** Edited **

I have an alternate approach in mind but don't know how to implement. I can use DropDownListFor which again can be bound like other elements from a model.

For this I added a field in the model as below:

    public StatusCode WorkStatus { get; set; }

    public enum StatusCode
    {
        Completed,
        InProgress
    }

Can the issue be solved if I use DropDownListFor ? I think it should work like how I am fetching sheet.ID.

To go with this approach, the only problem is how to construct a DropDownListFor definition as it is using enum.

Answer 1

One approach is put id next to the name of dropdown and get that in function

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

Answer 2

You can pass this as well inside your function call where this refer to current button which is clicked then using this button get your select-box value from previous row.

Demo Code :

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>