根据类和行 ID 更改表行的选择列表

Question

我有一个代码，其中我使用的表格带有一个选择列表，该列表在选择选项时会影响另一个选择列表。我无法按类而不是所有类选择单个选择列表。基本上我想不出正确的语法来选择一个表行 ddl 而不影响具有相同类名的所有选择列表。代码<tr id=100> //mockup of what my rows look like ID iterates, 101, 102, etc.    <td>       <select name="tbTest" id="tbTest" class="tbTestddl" style="max-width:200px">             <option value=1>1</option>            <option value=2>2</option>             <option value=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>JS    $('.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) {        var clearddl= $('.tbAnswerddl');        clearddl.empty();        $.each(result, function () {            var option = document.createElement("option");            option.text = this.AnswerName;            option.value = this.AnswerID;            $('.tbAnswerddl').append(option);        });    }});

Answer 1

您可以使用rowID仅更改特定的行选择 $("#" + rowID).find('.tbAnswerddl')。并使用相同的选择附加选项。

演示代码（我已删除此演示中不需要的 ajax 代码）：

//dummy data

var result = [{

  "AnswerName": "abc",

  "AnswerID": "123"

}, {

  "AnswerName": "abcd",

  "AnswerID": "123a"

}];

$('.tbTestddl').change(function() {

  var TestID = $('option:selected', this).val();//value of select-box

  var rowID = $(this).closest('tr').attr('id');

  console.log("val -"+TestID)

  console.log("rowid -"+rowID)

  GetAnswer(TestID, rowID);

});

function GetAnswer(TestID, rowID) {

  //finding slect under the row given

  var clearddl = $("#" + rowID).find('.tbAnswerddl');

  clearddl.empty();

  $.each(result, function() {

    var option = document.createElement("option");

    option.text = this.AnswerName;

    option.value = this.AnswerID;

    clearddl.append(option); //append to that row

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <tr id=102> 

    <td>

      <select name="tbTest" id="tbTest" class="tbTestddl" style="max-width:200px">

        <option value=1>1</option>

        <option value=2>2</option>

        <option value=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>

  <tr id=100> 

    <td>

      <select name="tbTest" id="tbTest" class="tbTestddl" style="max-width:200px">

        <option value=1>1</option>

        <option value=2>2</option>

        <option value=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>

</table>