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

【问题标题】：Change Select List of table row based on class and row IDs根据类和行 ID 更改表行的选择列表
【发布时间】：2020-10-19 17:21:11
【问题描述】：

我有一段代码，我正在使用一个表，其中一个表选择列表，它会在选择一个选项时影响另一个选择列表。我无法按类而不是所有类来选择单个选择列表。基本上我想不出正确的语法来选择一个表行 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>

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


    }
});

【问题讨论】：

标签： javascript html jquery html-table

【解决方案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>

【讨论】：