Javascript 在数据表中使用onchange函数
我正在使用Datatables在表中创建表单。我有一个选择类型的输入，该值将根据另一个输入而改变。我现在的问题是它只在第一排工作。这是我的测试用例Javascript 在数据表中使用onchange函数,javascript,php,datatables,Javascript,Php,Datatables,我正在使用Datatables在表中创建表单。我有一个选择类型的输入，该值将根据另一个输入而改变。我现在的问题是它只在第一排工作。这是我的测试用例 <table id="example" class="display nowrap" width="100%"> <thead> <tr> <th>ID</th> <th>select 1</th> <t
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>ID</th>
<th>select 1</th>
<th>select 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="input1" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select id="input2"></select></td>
</tr>
<tr>
<td>2</td>
<td>
<select id="input1" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select id="input2"></select></td>
</tr>
<tr>
<td>3</td>
<td>
<select id="input1" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select id="input2"></select></td>
</tr>
<tr>
<td>4</td>
<td>
<select id="input1" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select id="input2"></select></td>
</tr>
<tr>
<td>5</td>
<td>
<select id="input1" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select id="input2"></select></td>
</tr>
</tbody>
</table>
身份证件
选择1
选择2
1.
1.
2.
3.
2.
1.
2.
3.
3.
1.
2.
3.
4.
1.
2.
3.
5.
1.
2.
3.
非常感谢您在这方面提供的任何帮助：）用以下代码替换您的代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title></title>
</head>
<body>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>ID</th>
<th>select 1</th>
<th>select 2</th>
</tr>
</thead
<tbody>
<tr>
<td>1</td>
<td>
<select id="input1" data-attr="1" class="form-control selectBox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select id="selectedInput1"></select></td>
</tr>
<tr>
<td>2</td>
<td>
<select id="input2" data-attr="2" class="form-control selectBox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select id="selectedInput2"></select></td>
</tr>
<tr>
<td>3</td>
<td>
<select id="input3" data-attr="3" class="form-control selectBox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select id="selectedInput3"></select></td>
</tr>
<tr>
<td>4</td>
<td>
<select id="input4" data-attr="4" class="form-control selectBox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select id="selectedInput4"></select></td>
</tr>
<tr>
<td>5</td>
<td>
<select id="input5" data-attr="5" class="form-control selectBox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select id="selectedInput5"></select></td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
var table = $('#example').DataTable();
$("#example tbody tr td .selectBox").on("change", function () {
var s1 = document.getElementById($(this).attr('id'));
var s2 = document.getElementById("selectedInput" + $(this).attr('data-attr'));
s2.innerHTML = "";
if (s1.value == "1") {
var optionArray = ["|--Select--", "ABC|ABC", "DEF|DEF", "GHI|GHI", ]
} else if (s1.value == "2") {
var optionArray = ["|--Select--", "JKL|JKL", "MNO|MNO", "PQR|PQR", ]
} else if (s1.value == "3") {
var optionArray = ["|--Select--", "STU|STU", "VWX|VWX", "YZ|YZ", ]
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
});
});
</script>
</body>
</html>
身份证件
选择1
选择2
是的，这可能是因为您在javascript中是通过Id选择项目的。所以JS只选择第一个项目。就像一个魅力！还有一个问题，如果我使用ajax加载表，我应该如何更改selectBox上的“data attr”部分？