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

Question

我有2个选择标签，将从数据库中获取信息。 1从product_category表中获取，其他从产品获取。我想使产品选择标签取决于product_category选择标签。例如，我有两类药品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>") 
    }) 

}) 
});