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

Question

我有 2 个选择标签，它们将从数据库中获取信息。 1 取自 product_category 表，其他取自产品。我想让产品选择标签依赖于 product_category 选择标签。例如，我有 2 类药物 1 是胶囊剂，其他是片剂。当我在 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 很容易在第二次选择中加载其产品名称

您的主文件代码如下

<?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代码

  <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>

你的 ajax 文件代码

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>";
    }
?>

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

Answer 2

没错，您需要使用 Ajax。当您在成功方法上选择 product_category 时，您必须调用 product_tag 的名称。这样您就可以使用 product_category 的 ID 来获取产品标签的名称。使用 Jquery AJax ;)

http://api.jquery.com/jquery.ajax/

首先，填写第一个选择（选择类别）。在此选择上创建一个事件“更改”，当用户选择一个选项时，用 Ajax 填充另一个选择。像这样：

$( "#product_category" ).change(function() {

 $.ajax({
    method: "POST",
    url: "some.php", /* The page you want */
    data: { id:  } /* here , you have to send the ID product category */ 
 }).success(data ) {
    /* Here you have to fill your new select with the info you have got it. If you selected capsules, the info you get it is the name of capsules*/
     $.each(data, function() { /* Iterator the object */
        $("#product_name").append("<option>" + data.value + "</option>")
     })

 })
});