我的脚本中的新条目有动态生成的行，在该动态生成的行中，我分别使用三个依赖的下拉列表国家/地区、州和城市。该脚本按照我的要求运行良好。目前可以从依赖列表中选择单个项目。但现在我想从第一个（国家）和（州）列表中选择后，我想从第三个列表中选择多个城市值 这是我当前的代码：
`<table class="table table-bordered">
<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)) {
echo '<option value="'.$row['id'].'">'.$row['name'].'</option>'."\r";
}
}
?>
</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">
<option value="">Select Machine</option>
</select>
</td>
<td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" value="" /></td>
<td><input type="text" class="price form-control text-end" name="price1[]" id="ddd" value="" /></td>
<td class="NoPrint"><button type="button" class="btn btn-success" style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$(document).on("change", ".country", 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>');
row.find('.qty').val('');
row.find('.price').val('');
}
});
});
// When the user changes the value of the state select element
$(document).on("change", ".state", 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);
row.find('.qty').val('');
row.find('.price').val('');
}
});
});
$(document).on("change", ".city", function(){
// Get the current row element
let row = $(this).closest("tr");
// Get the state id from the current select element
let city_id = $(this).val();
if (city_id.length == 0) {
row.find('.qty').val('');
row.find('.price').val('');
//return;
} else {
// Use AJAX to send a request to the server-side script
$.ajax({
url: 'response.php',
type: 'POST',
dataType: 'JSON',
data: {cid: city_id} ,
success: function(response) {
row.find('.qty').val(response.qty);
row.find('.price').val(response.price);
}
});
}
});
});
</script>`
这是响应 .php 文件
`<?php
include_once 'db1.php';
if (!empty($_POST["id"])) {
$id = $_POST['id'];
$query = "SELECT id, state 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>';
}
}
}
if (!empty($_POST['sid'])) {
$id = $_POST['sid'];
$query1 = "SELECT id, city 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>';
}
}
}
if(!empty($_POST['cid'])){
$city_id = $_POST['cid'];
$query_asset = "SELECT qty, price FROM assets WHERE city_id=$city_id";
$result_asset = mysqli_query($con, $query_asset);
if ($result_asset->num_rows > 0) {
$row_asset = mysqli_fetch_assoc($result_asset);
$response = array('qty' => $row_asset['qty'], 'price' => $row_asset['price']);
}
echo json_encode($response);
exit;
}`
?>~~~
在第三个城市列表的选择中使用multiple属性并更改
<select class="city form-control text-end" name="city[]" id="city" multiple>
并在 $(document).on("change", ".state", function() 中更改行：
success: function (data) {
row.find(".city").html(data);
row.find(".city").prop("disabled", false); // Enable the multi-select
row.find('.qty').val('');
row.find('.price').val('');
}