基于类与行ID实现表格行下拉列表联动的问题排查

Hey there! I see the issue you're facing—when you select an option in one dropdown, all dropdowns with the .tbAnswerddl class are being updated instead of just the one in the same table row. Let's fix that by making sure we only target the dropdown in the row where the change event happened.

The Problem with Your Current Code #

In your AJAX success callback, you're using the global selector $('.tbAnswerddl'), which matches every element with that class on the page. That's why all rows' dropdowns are getting cleared and updated. We need to narrow this down to just the dropdown in the row where the change event occurred.

Solution 1: Use the Row ID to Target the Correct Dropdown #

You already capture the row ID (rowID) in the change event, so we can use that to find the specific .tbAnswerddl inside that row. Here's the modified code:

<tr id="100"> <!-- Note: Added quotes for valid HTML attribute syntax -->
<td>
<select name="tbTest" id="tbTest" class="tbTestddl" style="max-width:200px">
<option value="1" TestID="1">1</option> <!-- Added quotes for attributes -->
<option value="2" TestID="2">2</option>
<option value="3" TestID="3">3</option>
</select>
</td>
<td>
<select name="tbAnswer" id="tbAnswer" class="tbAnswerddl" style="max-width:200px">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>

$('.tbTestddl').change(function () {
  var TestID = $('option:selected', this).attr('TestID');
  var rowID = $(this).closest('tr').attr('id');
  GetAnswer(TestID, rowID);
});

function GetAnswer(TestID, rowID) {
  $.ajax({
    url: '/Test/GetAnswersList',
    type: 'GET',
    data: { TestID: TestID },
    dataType: "json",
    success: function (result) {
      // Target ONLY the .tbAnswerddl inside the current row
      var $targetDdl = $('#' + rowID + ' .tbAnswerddl');
      $targetDdl.empty();
      
      $.each(result, function () {
        var option = document.createElement("option");
        option.text = this.AnswerName;
        option.value = this.AnswerID;
        $targetDdl.append(option); // Append to the targeted dropdown only
      });
    }
  });
}

Solution 2: Pass the Target Dropdown Directly (More Efficient) #

Instead of relying on the row ID, we can directly grab the target dropdown element in the change event and pass it to the GetAnswer function. This avoids an extra DOM lookup by ID:

$('.tbTestddl').change(function () {
  var TestID = $('option:selected', this).attr('TestID');
  // Find the .tbAnswerddl in the same row as the changed dropdown
  var $targetDdl = $(this).closest('tr').find('.tbAnswerddl');
  GetAnswer(TestID, $targetDdl);
});

function GetAnswer(TestID, $targetDdl) {
  $.ajax({
    url: '/Test/GetAnswersList',
    type: 'GET',
    data: { TestID: TestID },
    dataType: "json",
    success: function (result) {
      $targetDdl.empty();
      
      $.each(result, function () {
        var option = document.createElement("option");
        option.text = this.AnswerName;
        option.value = this.AnswerID;
        $targetDdl.append(option);
      });
    }
  });
}

Key Takeaway #

The core fix is restricting your selector to the current table row instead of using a global class selector. Both solutions achieve this—pick the one that fits your code style better.

内容的提问来源于stack exchange，提问作者jack