如何在一个 select 选项中获取选定值，并在此基础上，从 MySQL 表中获取数据，以相同形式显示另一个 select 选项

Question

在我的 web 页面中，我在一个表单中有两个 select 选项。 第一个 select 选项是使用 PHP 从 MySQL 表中获取的类别，并且工作正常。 但是第二个 select 选项显示了需要根据用户选择的类别选项从 MySQL 表中获取的子类别。 我不知道 ajax、jQuery 代码与 MySQL 数据库一起使用。 这是我的代码

第一个 select 选项（工作正常）

<select class="form-control"  name="catid" required>
    <option value="">select</option>
       <?php 
        $sql="select cat_id,cat_name from tbl_categories";
        $query=mysqli_query($conn,$sql);
        while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){ ?>
       <option value="<?php echo $row['cat_id'];?>"><?php echo ($row['cat_name']); ?></option>
       <?php 
         }
         if(isset($_POST['catid'])){
          $cid=$_POST['catid'];
         }
        ?>
</select>

第二个 select 选项（不工作）

<select class="form-control"  name="subcatid" required>
    <option value="">select</option>
        <?php 
            $sql2="select s_id,subcat_name from tbl_subcategories where cat_id='$cid' order by subcat_name";
             $query2=mysqli_query($conn,$sq2);
             while($row2 = mysqli_fetch_array($query2, MYSQLI_ASSOC)){ ?>
             <option value="<?php echo $row2['s_id'];?>"><?php echo ($row2['subcat_name']); ?></option>
         <?php } ?>
  </select>

Answer 1

"chained select menus"的想法之前已经介绍过很多次，可以通过不同的方式实现，但其本质如下所示。 主 select 菜单具有分配给它的change事件处理程序，该处理程序向某处的某些 PHP 脚本触发 ajax 请求。 在下面的代码中，ajax 请求被发送到同一页面，但它可能是一个单独的文件。 The target php script intercepts the POST request and uses the supplied POST data to build a new SQL query which is executed and the results processed to generate, in this case, a string of HTML data which is sent back to the ajax callback. 而不是使用现在老式的XMLHttpRequest下面使用fetch api还必须注意，您的代码容易受到 SQL 注入的影响 - 因此您必须学习使用准备好的语句

以下内容均未经过测试，因此可能存在小错误..但它应该为您指明正确的方向。 圣诞快乐。

<?php

    if( $_SERVER['REQUEST_METHOD']=='POST' && isset(
        $_POST['catid'],
        $_POST['action']
    )){
        ob_clean();
        
        if( $_POST['action']=='get-sub-category' ){
            $html='';
        
            $sql='select `s_id`, `subcat_name` from `tbl_subcategories` where `cat_id`=? order by `subcat_name`';
            $stmt=$conn->prepare( $sql );
            $stmt->bind_param('s',$_POST['catid']);
            $stmt->execute();
            $stmt->store_result($sid,$name);
            
            
            while( $stmt->fetch() ) $html.=sprintf('<option value="%s">%s',$sid,$name);
            $stmt->free_result();
            $stmt->close();
            
            exit( $html );
        }
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
    </head>
    <body>
        <select class="form-control"  name="catid" required>
            <option selected hidden disabled>select
            <?php
                $sql='select `cat_id`, `cat_name` from `tbl_categories`';
                $res=$conn->query( $sql );
                
                while( $row = $res->fetch_assoc() ){
                    printf(
                        '<option value="%s">%s',
                        $row['cat_id'],
                        $row['cat_name']
                    );
                }
            ?>
        </select>

        <select name='subcatid' class='form-control'>
            <option selected hidden disabled>Please select
        </select>
        
        <script>
            document.querySelector('select[name="catid"]').addEventListener('change',function(e){
                
                let fd=new FormData();
                    fd.set('catid',this.value);
                    fd.set('action','get-sub-category');
                    
                fetch(location.href,{method:'post',body:fd })
                    .then(r=>r.text())
                    .then(html=>{
                        let oSelect=document.querySelector('select[name="subcatid"]');
                        let options=oSelect.querySelector('option:not(disabled)');
                            options.forEach(option=>oSelect.removeChild(option))
                        
                        oSelect.inserAdjacentHTML('beforeend',html);
                    })

            });
        </script>
    </body>
</html>