根据PHP中模态中下拉值1的选择动态更新下拉值2

Question

我的页面上有两个下拉列表。

1. 我有一个直接从DB中提取的drop
2. 我有一个下拉列表完全取决于从下拉列表1中选择并从数据库中提取

我在模态中有这两个下拉列表。我不知道如何将javascript变量插入下拉列表2中。

这是我的代码：

下拉1:

<select class="selectpicker form-control mt-2" id="schoolname" name="schoolname" data-width="" title="School" onChange=reload(this.form)>   
<?php 
$prod_query = "SELECT * FROM my_school_class";
$prodresult = mysqli_query($DBconnect, $prod_query);
while($r = mysqli_fetch_array($prodresult)) 
{
if (!empty($schoolName) && $schoolName == $r['schoolName']) 
{
$selected = 'selected="selected"';
} 
else 
{
$selected = '';
} 
echo "<option ".$selected." value=".$r['schoolName'].">".$r['schoolName']."</option>"; 
} ?>
</select>

下拉2:

<select class="selectpicker form-control mt-2" id="classname" name="classname" data-width="" title="class">   
<?php 
$prod_query = "SELECT * FROM my_class WHERE school="JAVASCRIPT VARIABLE SHOULD COME HERE";
$prodresult = mysqli_query($DBconnect, $prod_query);
while($r = mysqli_fetch_array($prodresult)) 
{
echo "<option ".$selected." value=".$r['className'].">".$r['className']."</option>"; 
} ?>
</select>

Javascript正确写入控制台：

<script language=JavaScript>
function reload(form)
{
var val=form.schoolname.options[form.schoolname.options.selectedIndex].value;
console.log (val);
}

上面的变量用chrome在控制台上正确打印所选内容。我把所有这些都包含在模态中。让我知道如何解决这个问题？

谢谢！

Answer 1

使用JQUERYindex.html

$(document).on('change','#schoolname',function(){
var schoolname = $('#schoolname').val();
$('#classname').empty();
$('#classname').append('<option value="" disabled selected>Choose your option</option>');
$.ajax({
url: 'GetClassname.php',
type: 'POST',
data: {schoolname : schoolname },
success: function(data) {
$('#classname').append(data);
}
});
});

GetClassname.php

<?php
include('../config.php');
$schoolname = $_POST['schoolname'];

$prod_query = "SELECT * FROM my_class WHERE school='$schoolName'";
$prodresult = mysqli_query($DBconnect, $prod_query);
while($r = mysqli_fetch_array($prodresult)) {
echo "<option ".$selected." value=".$r['className'].">".$r['className']."</option>"; 
} 
?>

Answer 2

像这样调用ajax(纯香草js(

function reload(form)
{
const id = form.schoolname.options[form.schoolname.options.selectedIndex].value
var xhr = new XMLHttpRequest();
xhr.open('POST', '/fetch_second.php/');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.onload = function() {
if (xhr.status === 200) {
const data = xhr.responseText
let elem = document.querySelector( 'css-selector (#container id)')
elem.appendChild(responseText)

}
else if (xhr.status !== 200) {
console.log('Request failed.  Returned status of ' + xhr.status);
}
}
xhr.send(encodeURI('id=' + id))
}

并更改

这个css选择器(#containerid(从您的模式到您的容器id或className

在您的fetch_second.php 中

$schoolName = $_POST['id']; 
$prod_query = "SELECT * FROM my_class WHERE school='$schoolName'";
$prodresult = mysqli_query($DBconnect, $prod_query);
while($r = mysqli_fetch_array($prodresult)) {

echo "<option value=".$r['className'].">".$r['className']."</option>";
}