根据类和行 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 datavar result = [{&nbsp; "AnswerName": "abc",&nbsp; "AnswerID": "123"}, {&nbsp; "AnswerName": "abcd",&nbsp; "AnswerID": "123a"}];$('.tbTestddl').change(function() {&nbsp; var TestID = $('option:selected', this).val();//value of select-box&nbsp; var rowID = $(this).closest('tr').attr('id');&nbsp; console.log("val -"+TestID)&nbsp; console.log("rowid -"+rowID)&nbsp; GetAnswer(TestID, rowID);});function GetAnswer(TestID, rowID) {&nbsp; //finding slect under the row given&nbsp; var clearddl = $("#" + rowID).find('.tbAnswerddl');&nbsp; clearddl.empty();&nbsp; $.each(result, function() {&nbsp; &nbsp; var option = document.createElement("option");&nbsp; &nbsp; option.text = this.AnswerName;&nbsp; &nbsp; option.value = this.AnswerID;&nbsp; &nbsp; clearddl.append(option); //append to that row&nbsp; });}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <tr id=102>&nbsp;&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <select name="tbTest" id="tbTest" class="tbTestddl" style="max-width:200px">&nbsp; &nbsp; &nbsp; &nbsp; <option value=1>1</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value=2>2</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value=3>3</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </td>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <select name="tbAnswer" id="tbAnswer" class="tbAnswerddl" style="max-width:200px">&nbsp; &nbsp; &nbsp; &nbsp; <option value=1>1</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value=2>2</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value=3>3</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </td>&nbsp; </tr>&nbsp; <tr id=100>&nbsp;&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <select name="tbTest" id="tbTest" class="tbTestddl" style="max-width:200px">&nbsp; &nbsp; &nbsp; &nbsp; <option value=1>1</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value=2>2</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value=3>3</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </td>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <select name="tbAnswer" id="tbAnswer" class="tbAnswerddl" style="max-width:200px">&nbsp; &nbsp; &nbsp; &nbsp; <option value=1>1</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value=2>2</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value=3>3</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </td>&nbsp; </tr></table>