我想使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>") 
    }) 

}) 
});