动态填充下拉列表,基于php中第一个列表的选定值

时间:2014-06-26 06:19:19

标签: php mysqli

我有一个小的PHP页面,其中包含两个下拉列表

我需要根据第一个下拉列表中选择的结果填充第二个。这可能吗?换句话说,我需要使用从第一个下拉列表中选择的值,并在用于填充第二个下拉列表的dB查询中使用它(但这应该在选择第一个下拉列表时填充。

如果可以提供任何提示吗? (您可以假设我能够从dB填充第一个下拉列表)

与db连接

       <?php
        include ("db_connect.php");
        ?>

的javascript:

       function abc()
        {
            var val = document.getElementById('customer_type').value;
            self.location='add.php?customer_type=' + val ;
        }

PHP

     <div class="heading">
            <h1>Add Products</h1>
        </div>

        <div class="content">
            <form action="" method="post" enctype="multipart/form-data">        
                <span class="text_line">Select Customer Type:</span>
                    <select name="customer_type" id="customer_type" onChange="abc()" style="line-height: 30px;
        height: 30px; width:18%;">
                    <option class="tfield"> Customer Type </option>
                        <?php
                        $result = mysqli_query($con, "SELECT * FROM cust_type");
                        while($row = mysqli_fetch_array($result))
                        {
                            $cust_name = $row['customer_type'];
                            echo "<option value='$cust_name'> $cust_name </option>";                    
                        }
                        ?>
                    </select><br />


                <span class="text_line">Select Shoes Type:</span>
                    <select name="shoe_type" style="line-height: 30px;
        height: 30px; width:18%;">
                    <option class="tfield"> Shoes Type </option>
                        <?php
                        $result1 = mysqli_query($con, "SELECT * FROM shoes_type");
                        while($row1 = mysqli_fetch_array($result1))
                        {
                            $shoesid = $row1['gender_id'];
                            $shoes_cat = $row1['shoes_category'];
                            echo "<option value= '$shoesid'> $shoes_cat </option>";
                        }
                        ?>
                    </select><br />           

                    <span class="text_line">Select Image:</span>
                        <input type="file" name="upload" style="line-height: 30px;
        height: 30px; width:18%; color:#fff;"/><br />

                    <span class="text_line">Price:</span>
                        <input type="text" name="price" class="tfield"/><br />

                    <span class="text_line">Description:</span>
                        <textarea name="descrip" cols="25" class="tfield"></textarea><br />

                    <div class="button1">
                        <input type="submit" name="submit" value="Submit" class="sign" />
                   </div>
            </form>
        </div>


        <?php
        if(isset($_POST['submit']))
        {
            $cust_type = $_POST['customer_type'];
            $prod_price = $_POST['price'];
            $shoe_img = $_FILES["upload"]["name"];
            $prod_descrip = $_POST['descrip'];
            $shoeid = $_POST['shoe_type'];

            if($cust_type == "" || $prod_price == "" || $shoe_img == "" || $prod_descrip == "")
            {
        ?>
               <!-- <div style="color:#FFF; text-align:center; font-size:20px; font-family:Arial, Helvetica, sans-serif; margin-top:2%;">-->
                <?php 
                echo "Please fill all the fields";?>
                </div>
                <?php
            }
            else
            {
                $result2 = mysqli_query($con, 
                "SELECT * FROM shoes_type WHERE shoes_id = '$shoeid'");

                while($row2 = mysqli_fetch_array($result2))
                {
                    $shoesid = $row2['shoes_id'];
                    $shoetype = $row2['shoes_category'];
                }
                $sql = mysqli_query($con, "INSERT INTO 
        product(shoes_id,customer_type,shoe_type,shoe_price,image,description)
        VALUES('$shoesid','$cust_type','$shoetype','$prod_price','$shoe_img','$prod_descrip')");
                ?>
                <!--<div style="color:#FFF; text-align:center; font-size:20px; font-family:Arial, Helvetica, sans-serif; margin-top:5%;">-->
            <?php
                echo "Data inserted !!!";
            ?>
            <?php   
                //echo "<meta http-equiv='Refresh' content='1'; URL='index.php?id=addproduct'>";
            ?>

            </div>
        <?php
            }//else loop ends

        }//if loop ends

        ?>

我在ajax和jquery方面经验不足。请在javascript和php中提出解决方案

1 个答案:

答案 0 :(得分:0)

我不清楚你的 shoes_type 表中是否有customer_type。但还是试试这个,

与db连接

<?php
 include ("db_connect.php");
?>

<强>的javascript:

function abc(){
            var val = document.getElementById('customer_type').value;
            $.post("getSecondDropDown.php",{ gender_id:val}, function( data ) {
            $("#shoe_type").html(data);

        });
 }

您的主要 PHP

<div class="heading">
            <h1>Add Products</h1>
        </div>

        <div class="content">
            <form action="" method="post" enctype="multipart/form-data">        
                <span class="text_line">Select Customer Type:</span>
                    <select name="customer_type" id="customer_type" onChange="abc()" style="line-height: 30px;
        height: 30px; width:18%;">
                    <option class="tfield"> Customer Type </option>
                        <?php
                        $result = mysqli_query($con, "SELECT * FROM cust_type");
                        while($row = mysqli_fetch_array($result))
                        {
                            $cust_name = $row['customer_type'];
                            $gender_id = $row['gender_id'];
                            echo "<option value='$gender_id '> $cust_name </option>";                    
                        }
                        ?>
                    </select><br />


                <span class="text_line">Select Shoes Type:</span>
                    <select name="shoe_type" id="shoe_type" style="line-height: 30px;
        height: 30px; width:18%;">


                    </select><br />           

                    <span class="text_line">Select Image:</span>
                        <input type="file" name="upload" style="line-height: 30px;
        height: 30px; width:18%; color:#fff;"/><br />

                    <span class="text_line">Price:</span>
                        <input type="text" name="price" class="tfield"/><br />

                    <span class="text_line">Description:</span>
                        <textarea name="descrip" cols="25" class="tfield"></textarea><br />

                    <div class="button1">
                        <input type="submit" name="submit" value="Submit" class="sign" />
                   </div>
            </form>
        </div>


        <?php
        if(isset($_POST['submit']))
        {
            $cust_type = $_POST['customer_type'];
            $prod_price = $_POST['price'];
            $shoe_img = $_FILES["upload"]["name"];
            $prod_descrip = $_POST['descrip'];
            $shoeid = $_POST['shoe_type'];

            if($cust_type == "" || $prod_price == "" || $shoe_img == "" || $prod_descrip == "")
            {
        ?>
               <!-- <div style="color:#FFF; text-align:center; font-size:20px; font-family:Arial, Helvetica, sans-serif; margin-top:2%;">-->
                <?php 
                echo "Please fill all the fields";?>
                </div>
                <?php
            }
            else
            {
                $result2 = mysqli_query($con, 
                "SELECT * FROM shoes_type WHERE shoes_id = '$shoeid'");

                while($row2 = mysqli_fetch_array($result2))
                {
                    $shoesid = $row2['shoes_id'];
                    $shoetype = $row2['shoes_category'];
                }
                $sql = mysqli_query($con, "INSERT INTO 
        product(shoes_id,customer_type,shoe_type,shoe_price,image,description)
        VALUES('$shoesid','$cust_type','$shoetype','$prod_price','$shoe_img','$prod_descrip')");
                ?>
                <!--<div style="color:#FFF; text-align:center; font-size:20px; font-family:Arial, Helvetica, sans-serif; margin-top:5%;">-->
            <?php
                echo "Data inserted !!!";
            ?>
            <?php   
                //echo "<meta http-equiv='Refresh' content='1'; URL='index.php?id=addproduct'>";
            ?>

            </div>
        <?php
            }//else loop ends

        }//if loop ends

        ?>

这将是您的新PHP文件,它将获取第二个选择框中的所有值。

<强> getSecondDropDown.php

<?php
    $gender_id =$_POST['gender_id '];
    $option="";
              $result1 = mysqli_query($con, "SELECT * FROM shoes_type where gender_id ='$gender_id'");
               while($row1 = mysqli_fetch_array($result1))
               {
                   $shoesid = $row1['gender_id'];
                   $shoes_cat = $row1['shoes_category'];
                   $option.= "<option value= '$shoesid'> $shoes_cat </option>";
                }
        echo $option;
  ?>

还有一件事,你需要添加jQuery库才能工作。