Change Select List of table row based on class and row IDs

Question

I have a piece of code where I am using a table with a select list that affects another select list when an option is selected. I am having trouble selecting the individual select list by it's class rather than all classes. Basically I can't think of the right syntax to just select that one table row ddl without affecting all select lists with the same class names.

Code

<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

You can use rowID to change only the particular row select using $("#" + rowID).find('.tbAnswerddl') . and use the same select to append options.

Demo Code (I have removed ajax code it was not needed in this demo):

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