javascript - 我想让 2 个 html 选择标签依赖。我该怎么做？

Question

我有 2 个选择标签，它们将从数据库中获取信息。 1 取自 product_category 表，其他取自产品。我想让产品选择标签依赖于 product_category 选择标签。例如，我有两类药物，一类是胶囊，另一类是药片。当我在 product_category 选择标签中选择胶囊时，我希望产品选择标签向我显示胶囊的名称。我如何让它依赖？这是这些选择标签的代码。

<div class="form-group" style="width:50%;">
        <label>Select Category</label>
        <select class="form-control" name="product_category" id="product_category" >
            <?php 
            $query="SELECT * FROM product_category";
            $cat_result= mysqli_query($connection,$query);
            while($cat_row = mysqli_fetch_assoc($cat_result))
            {
              $ctg_id=$cat_row['category_id'];
              $ctg_name= $cat_row['category_name'];
              echo "<option value='$ctg_id'>$ctg_name</option>";
            }
            ?>    
        </select>
    </div>
   <div class="form-group" style="width:50%;">
        <label>Select Product</label>
        <select class="form-control" name="product_name" id="product_name">
            <?php 
            $query="SELECT product_id,product_name FROM product";
            $result= mysqli_query($connection,$query);
            while($row = mysqli_fetch_assoc($result))
            {
              $product_id=$row['product_id'];
              $product_name= $row['product_name'];
              echo "<option value='$product_id'>$product_name</option>";
            }
            ?>    
        </select>
    </div>

Answer 1

使用 ajax 在第二个选择中加载它的产品名称很简单

your main file code is below

<?php 
$connection=mysqli_connect("localhost","root","","your database name");
?>
<div class="form-group" style="width:50%;">
        <label>Select Category</label>
        <select class="form-control" name="product_category" id="product_category" >
            <?php 
            echo  $query="SELECT * FROM product_category";
            $cat_result= mysqli_query($connection,$query);
            while($cat_row = mysqli_fetch_assoc($cat_result))
            {
              $ctg_id=$cat_row['category_id'];
              $ctg_name= $cat_row['category_name'];
              echo "<option value='$ctg_id'>$ctg_name</option>";
            }
            ?>    
        </select>
    </div>
   <div class="form-group" style="width:50%;">
        <label>Select Product</label>
        <select class="form-control" name="product_name" id="product_name">

        </select>
    </div>

下载 letest javascript 库 https://jquery.com/download/

脚本代码

  <script type="text/javascript" src="path of .js library file"></script>   
     <script type="text/javascript">
        $(document).ready(function(){
            $("#product_category").change(function(){
                var id=$("#product_category").val();
                $.ajax({
                    type:"post",
                    data:{id:id},
                    url:"ajaxcoderesponse.php",
                    success:function(result){
                        $("#product_name").html(result);
                    }
                });
            });
        });
     </script>

your ajax file code

ajaxcoderesponse.php

<?php
    $connection=mysqli_connect("localhost","root","","your database name");

    $id=$_POST['id'];
    $query="SELECT product_id,product_name FROM product where category_id=$id";
    $result= mysqli_query($connection,$query);
    while($row = mysqli_fetch_assoc($result))
    {
      $product_id=$row['product_id'];
      $product_name= $row['product_name'];
      echo "<option value='$product_id'>$product_name</option>";
    }
?>

在product表中创建category_id字段，并给出product_category表记录的id