我在页面上有3个下拉菜单。它是多级的,这意味着三者中的最高者决定了第二个下拉菜单中应填充的内容。在第三个下拉菜单中应填充的内容取决于在第二个下拉菜单中选择的内容。
<form name="schoolcreation" method="POST">
<div class="row">
<select name="country" id="country">
<option value=''>-- Select Country --</option>
<?php
$sql = "select * from `countries`";
$res = mysqli_query($con, $sql);
if(mysqli_num_rows($res) > 0) {
while($row = mysqli_fetch_object($res)) {
echo "<option value='".$row->alpha_3."'>".$row->name."</option>";
}
}
?>
</select>
</div>
<div class="row">
<select name="state" id="state"><option>-- Select State--</option></select>
</div>
<div class="row">
<select name="lga" id="lga"><option>-- Select Local Government Area--</option></select>
</div>
<div class="row">
<input type="submit" name="submit" value="CREATE SCHOOL" class="btn btn-submit">
</div>
</form>
第一和第二级效果很好。当我在第二个下拉列表中选择时,它不会填充第三个下拉列表。我该怎么办?
$(document).ready(function() {
$("#state").change(function() {
var state_id = $(this).find('option:selected').text();
if(state_id != "") {
console.log( state_id );
$.ajax({
url:"get_lg_areas.php",
data:{s_id:state_id.replace('State','').trim()},
type:'POST',
success:function(response) {
var resp = $.trim(response);
console.log( resp );
$("#lga").html(resp);
}
});
} else {
$("#lga").html("<option value=''>------- Select --------</option>");
}
});
});
这是php文件
<?php include("connectDB.php");
include("debug.php");
?>
<?php
if(isset($_POST['s_id'])) {
debug_to_console( $_POST['s_id'] );
$sql = "SELECT * FROM lga WHERE State = '" . mysqli_real_escape_string($con, $_POST['s_id'])."'";
$res = mysqli_query($con, $sql);
if( mysqli_num_rows($res) > 0 ) {
echo "<option value=''>-- Select State --</option>";
while($row = mysqli_fetch_object($res)) {
echo "<option value='".$row->SNo."'>".$row->Local_Government_Area."</option>";
}
}
} else {
header('location: ./');
}
?>