Using onchange function in DataTables
Question
I'm working on creating form in a table using Datatables. I have a select type input that value will change according to another input. The problem that I'm having right now is it only work on the first row. Here is my test case.
<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>
Any help on this matter is greatly appreciated :)
1 answers
solution1
1 ACCPTED 2019-08-02 06:55:47
Replace your code with this code:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Using a callback function instead of onchange
Onchange function is not working using mvc?
Onchange function not working using laravel5
onChange event wont function using iCheck plugin
Accessing input value in React using onChange function
onchange function using select option not working in javascript
Why onchange function is not calling for DropDownList using Jquery?
Getting the values of a select using onchange function
Get checkbox value using onchange function
Using one onchange javascript function for all div
Related Tags