如何通过ajax更改多个下拉列表值？
我已经创建了4个书籍级别下拉列表，每一个都依赖于它的上层（例如，书籍级别2显示了依赖于书籍级别1类别的下拉值等等），而且它也工作得很好，但是现在我只希望书籍级别4独立，如果书籍级别1不是空的，那么应该显示这些值。i、 例如，onchange Book level 1、Book level 2下拉列表显示与Book level 1类别相关的值，并且还应显示独立的Book level 4下拉列表值。需要帮助 index.php如何通过ajax更改多个下拉列表值？,ajax,drop-down-menu,Ajax,Drop Down Menu,我已经创建了4个书籍级别下拉列表，每一个都依赖于它的上层（例如，书籍级别2显示了依赖于书籍级别1类别的下拉值等等），而且它也工作得很好，但是现在我只希望书籍级别4独立，如果书籍级别1不是空的，那么应该显示这些值。i、 例如，onchange Book level 1、Book level 2下拉列表显示与Book level 1类别相关的值，并且还应显示独立的Book level 4下拉列表值。需要帮助 index.php 一级书籍 一级书籍 书籍等级2 选择级别2 书本三级 选择级别3 书本
一级书籍
一级书籍
书籍等级2
选择级别2
书本三级
选择级别3
书本四级
选择级别4
创建bl1、bl2、bl3、bl4函数。在更改时调用函数。
像这样的
<select id="bl1" onchange="bl1()">
在bl1函数结束之前，调用bl4（）
函数bl1（）
{
$（'#bl1'）。on（'change'，function（）{
var blevel1=$（this.val（）；
if（blevel1）{
$.ajax({
类型：'POST'，
url:'ajaxData.php'，
数据：'bl1_代码='+blevel1，
成功：函数（html）{
$（'#bl2'）.html（html）；
$（'#bl3'）.html（'首先选择级别2'）；
$（'#bl4'）.html（'首先选择级别3'）；
}
});
}否则{
$（'#bl2'）.html（'首先选择级别1'）；
$（'#bl3'）.html（'首先选择级别2'）；
$（'#bl4'）.html（'首先选择级别3'）；
}
//此处为函数名，此处为业务逻辑
如果（诸如此类）
{
bl4（）；
}
否则{//blah blah}
}
}
请检查结束括号和语法，因为我还没有测试它。我可以在输入？？下拉选项中输入值吗
<body>
<?php
include 'dbConfig.php';
if(!empty($_POST["bl1_code"])){
$query2=$_POST['bl1_code'];
$query = $db->query("SELECT * FROM booklevel2 WHERE bl1_code LIKE '%$query2%' ORDER BY booklevel2 ASC");
$rowCount = $query->num_rows;
//Book Level 2 option list
if($rowCount > 0){
echo '<option value="">Select Level 2</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['bl2_code'].'">'.$row['booklevel2'].'</option>';
}
}else{
echo '<option value="">Level 2 empty</option>';
}
}
elseif(!empty($_POST["bl2_code"])){
$query3=$_POST["bl2_code"];
$query = $db->query("SELECT * FROM booklevel3 WHERE bl2_code LIKE '%$query3%' ORDER BY booklevel3 ASC");
$rowCount = $query->num_rows;
//Book Level 3 option list
if($rowCount > 0){
echo '<option value="">Select Level 3</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['bl3_code'].'">'.$row['booklevel3'].'</option>';
}
}else{
echo '<option value="">Level 3 empty</option>';
}
}
elseif(!empty($_POST["bl3_code"])){
$query4=$_POST["bl3_code"];
$query = $db->query("SELECT * FROM booklevel4 WHERE bl3_code LIKE '%$query4%' ORDER BY booklevel4 ASC");
$rowCount = $query->num_rows;
//Book Level 4 option list
if($rowCount > 0){
echo '<option value="">Select Level 4</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['bl4_code'].'">'.$row['booklevel4'].'</option>';
}
}else{
echo '<option value="">Level 4 empty</option>';
}
}
?>
</body>
// JavaScript Document
$(document).ready(function() {
$('#bl1').on('change',function(){
var blevel1 = $(this).val();
if(blevel1){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'bl1_code='+blevel1,
success:function(html){
$('#bl2').html(html);
$('#bl3').html('<option value="">Select Level 2 First</option>');
$('#bl4').html('<option value="">Select Level 3 First</option>');
}
});
}else{
$('#bl2').html('<option value="">Select Level 1 First</option>');
$('#bl3').html('<option value="">Select Level 2 First</option>');
$('#bl4').html('<option value="">Select Level 3 First</option>');
}
});
$('#bl2').on('change',function(){
var blevel2 = $(this).val();
if(blevel2){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'bl2_code='+blevel2,
success:function(html){
$('#bl3').html(html);
}
});
}else{
$('#bl3').html('<option value="">Select Level 2 First</option>');
$('#bl4').html('<option value="">Select Level 3 First</option>');
}
});
$('#bl3').on('change',function(){
var blevel3 = $(this).val();
if(blevel3){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'bl3_code='+blevel3,
success:function(html){
$('#bl4').html(html);
}
});
}else{
$('#bl4').html('<option value="">Select Level 3 First</option>');
}
});
});
<select id="bl1" onchange="bl1()">
function bl1()
{
$('#bl1').on('change',function(){
var blevel1 = $(this).val();
if(blevel1){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'bl1_code='+blevel1,
success:function(html){
$('#bl2').html(html);
$('#bl3').html('<option value="">Select Level 2 First</option>');
$('#bl4').html('<option value="">Select Level 3 First</option>');
}
});
}else{
$('#bl2').html('<option value="">Select Level 1 First</option>');
$('#bl3').html('<option value="">Select Level 2 First</option>');
$('#bl4').html('<option value="">Select Level 3 First</option>');
}
//function name here and business logic here
if(blah blah)
{
bl4();
}
else{ //blah blah}
}
}