我在表单中使用自动填充功能，当有一个下拉列表时它工作正常。但是当我必须使用多个依赖列表时，它会停止自动从 gfg.php 获取值。下面是我的完整代码。我还必须动态添加表单行，也许这是我的脚本中的问题，它用类处理动态行，这里是我的代码：
<thead class="table-success" style="background-color: #3fbbc0;">
<tr>
<th width="15%"><center>Type</th>
<th width="15%"><center>Service</th>
<th width="15%"><center>Machine</th>
<th width="5%"><center>Qty</th>
<th width="10%"><center>Rate</th>
<th width="5%"></th>
<button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>
</th>
</tr>
</thead>
<tbody id="TBody">
<tr id="TRow" class="d-none">
<td><Select class="country form-control text-end" name="country[]" id = "country" >
<option value=""> Select Type</option>
<?php
include('db1.php');
$query = "select * from country";
// $query = mysqli_query($con, $qr);
$result = $con->query($query);
if ($result->num_rows > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
<?php
}
} ?> </select> </td>
<td><Select class="state form-control text-end" name="state[]" id = "state">
<option value="">select Service</option></select></td>
<td><Select class="city form-control text-end" name="city[]" id = "city" onchange="GetDetail(this.closest('tr'))">
<option value="">Select Machine</option></select></td>
</td>
<td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" ></td>
<td><input type="text" class="price form-control text-end" name="price1[]" id="ddd" ></td>
<td class="NoPrint"><button type="button" class="btn btn-success" style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
</tr> </tbody> </table>
// code for auto fil and dependent drop down list
<script>
// onkeyup event will occur when the user
// release the key and calls the function
// assigned to this event
function GetDetail(row) {
let str = row.querySelector(".city").value;
if (str.length == 0) {
row.querySelector(".qty").value = "";
row.querySelector(".price").value = "";
return;
} else {
// Creates a new XMLHttpRequest object
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
// Defines a function to be called when
// the readyState property changes
if (this.readyState == 4 &&
this.status == 200) {
// Typical action to be performed
// when the document is ready
var myObj = JSON.parse(this.responseText);
// Returns the response data as a
// string and store this array in
// a variable assign the value
// received to first name input field
row.querySelector(".qty").value = myObj[0];
row.querySelector(".price").value = myObj[1];
}
};
// xhttp.open("GET", "filename", true);
xmlhttp.open("GET", "gfg.php?user_id=" + str, true);
// Sends the request to the server
xmlhttp.send();
}
}
//code for depdent list with classes
// When the user changes the value of the country select element
$(".country").on("change", function() {
// Get the current row element
let row = $(this).closest("tr");
// Get the country id from the current select element
let country_id = $(this).val();
// Use AJAX to send a request to the server-side script
$.ajax({
method: "POST",
url: "response.php",
data: {
id: country_id
},
datatype: "html",
success: function(data) {
// Find the state select element in the same row and update its options
row.find(".state").html(data);
// Find the city select element in the same row and clear its options
row.find(".city").html('<option value="">Select Machine</option>');
}
});
});
// When the user changes the value of the state select element
$(".state").on("change", function() {
// Get the current row element
let row = $(this).closest("tr");
// Get the state id from the current select element
let state_id = $(this).val();
// Use AJAX to send a request to the server-side script
$.ajax({
method: "POST",
url: "response.php",
data: {
sid: state_id
},
datatype: "html",
success: function(data) {
// Find the city select element in the same row and update its options
row.find(".city").html(data);
}
});
});
</script>
// Here is response.php file which handle dependent list
<?php
include_once("db.php");
if (!empty($_POST["id"])) {
$id = $_POST['id'];
$query = "select * from state where country_id=$id";
$result = mysqli_query($con, $query);
if ($result->num_rows > 0) {
echo '<option value="">Select Service</option>';
while ($row = mysqli_fetch_assoc($result)) {
echo '<option value="' . $row['id'] . '">' . $row['state'] . '</option>';
}
}
} elseif (!empty($_POST['sid'])) {
$id = $_POST['sid'];
$query1 = "select * from city where state_id=$id";
$result1 = mysqli_query($con, $query1);
if ($result1->num_rows > 0) {
echo '<option value="">Select Machine</option>';
while ($row = mysqli_fetch_assoc($result1)) {
echo '<option value="' . $row['id'] . '">' . $row['city'] . '</option>';
}
}
}
//gfg.php to get autofill values from database
<?php
// Get the user id
$user_id = $_REQUEST['user_id'];
// Database connection
$con = mysqli_connect("localhost", "root", "", "hmis");
if ($user_id !== "") {
// Get corresponding first name and
// last name for that user id
$query = mysqli_query($con, "SELECT qty1, uprice FROM machine1 WHERE user_id ='$user_id'");
$row = mysqli_fetch_array($query);
// Get the first name
$ccc = $row["qty1"];
$ddd = $row["uprice"];
}
// Store it in a array
$result = array("$ccc", "$ddd");
// Send in JSON encoded form
$myJSON = json_encode($result);
echo $myJSON;
?>
你必须调整一些事情：
更改此：
$(".country").on("change", function() { ... });
至：
$("#TBody").on("change", ".country", function() { ... });
并且：
$(".state").on("change", function() { ... });
至：
$("#TBody").on("change", ".state", function() { ... });
还必须添加 BtnAdd 功能：
function BtnAdd() {
let newRow = $("#TRow").clone().removeClass("d-none").appendTo("#TBody");
}
同样，对于删除按钮：
function BtnDel(button) {
$(button).closest("tr").remove();
}
最后，为了避免SQL注入替换：
$user_id = $_REQUEST['user_id'];
与：
$user_id = mysqli_real_escape_string($con, $_REQUEST['user_id']);