我有一段代码，其中我使用一个带有选择列表的表，当一个选项被选中时，该表会影响另一个选择列表。 我很难按类别而不是所有类来选择单独的选择列表。 基本上，我想不出正确的语法来只选择一个表行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);
});
}
});
您可以使用rowID仅更改特定行select使用$（“#”+rowID).find('.TBAnswerDDL')。 并使用相同的select追加选项。
演示代码（我删除了ajax代码，它在这个演示中不需要）:
null
//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>