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

时间:2017-06-05 07:38:48

标签: javascript php html css web

我有2个选择标签,可以从数据库中获取信息。 1取自product_category表和其他产品。我想让产品选择标签取决于product_category选择标签。例如,我有2类药物1是胶囊,其他是药片。我希望产品选择标签在product_category select标签中选择胶囊时显示胶囊的名称。我如何让它依赖?这是选择标签的代码。

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

2 个答案:

答案 0 :(得分:0)

确切地说,您需要使用Ajax。在success方法上选择product_category时,必须调用product_tag的名称。这样您就可以使用product_category的ID来获取产品标签的名称。使用Jquery AJax;)

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

首先,填写第一个选择(选择类别)。创建活动&#39;更改&#39;在这个选择上,当用户选择一个选项时,用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>")
     })

 })
});

答案 1 :(得分:0)

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