根據PHP中模態內下拉值1的選擇動態更新下拉值2

Question

我的頁面上有兩個下拉菜單。

1. 我有一個直接取自 DB 的 drop。
2. 我有一個下降完全取決於從下拉列表 1 中選擇並從 db 中獲取。

我在模態中有這兩個下拉菜單。 我不確定如何將 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

像這樣調用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-selector (#container id) 從你的模式到你的容器 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>";

        } 

Answer 2

使用 JQUERY index.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);
                 }
             });
  });

獲取類名.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>"; 
} 
?>