AJAX动态相关选择框

时间:2018-08-27 22:06:52

标签: javascript php jquery ajax

我需要什么?

我需要创建一个输入表单,必须按照下面的屏幕截图填写动态下拉列表。

Example

我的实际脚本是什么?

实际上分为一些文件,我将忽略数据库连接和函数文件。

assign.php

<?php
session_start();
ob_start();
if(isset($_SESSION['log'])){
include ('connection.php');
include ('functions.php');
//Variables que vienen desde el boton de ASSIGN 
    $szDescription = $_POST['szDescription'];
    $szRequestor = $_POST['szRequestor'];
    $szRecived = $_POST['szRecived'];
    $szCID = $_POST['szCID'];
?>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="..\css\bootstrap.min.css">
        <link rel="stylesheet" href="..\css\style.css">

        <script type="text/javascript">
        // Select Category function
        $(document).ready(function(){
            $('#szTeam').on('change',function(){
                var team_selected = $(this).val();
                $.ajax({
                    type:'POST',
                    url:'getcategory.php',
                    data:'teamselected='+team_selected,
                    success:function(html){
                        $('#optionCategory').html(html);
                    }
                });
            });
        });
        // FIN TEAM Select
        </script>
    </head>
    <body>
        <div class="container-fluid"><div class="container">
            <p class="bg-Success">You are about to assign this ticket:</p>
            <p><b>Subject:</b><i> <?php echo $szDescription ?></i></p>
            <p><b>From:</b><i> <?php echo $szRequestor ?></i></p>
            <p><b>Recived:</b><i> <?php echo $szRecived ?></i></p>
            <form action="" method="post">
                <div class="form-group">
                    <label for="szTeam">Team</label>
                    <select class="form-control form-control-sm" name="szTeam" id="szTeam">
                    <option>Select Team</option>
                        <?php
                        foreach($_SESSION['userteam'] as $userteamsArray){
                            echo "<option>".$userteamsArray."</option>";
                        }
                        ?>
                    </select>
                </div>
                <div class="form-group">
                    <label for="optionCategory">Category</label>
                    <select class="form-control form-control-sm" name="optionCategory" id="optionCategory" >
                    <option></option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary" name="SubmitButton">Submit</button>
            </form>
        </div></div>
    </body>
</html>

getcategory.php

<?php

include ('connection.php');

$team = $_POST['teamselected'];

$query = "SELECT szActivitySubCategory FROM Subcategories WHERE szTeam = '$team'";
$result = sqlsrv_query($conn,$query);
if(!$result){
    echo "<center>Error detected:Query <b>".$query."</b> did not work. 
   <br>Please contact the administrator</center><br>".sqlsrv_errors($query);
}
$ouput = "<option value=\"\">Select Category</option>";
while($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC))
{
    $selected = $row['szActivitySubCategory'];
    $ouput = $ouput."<option value='$selected'> $selected </option>";
}

echo $ouput;

?>

发生了什么事?

该代码无法正常工作。我使用默认团队测试了getcategory.php文件,并且可以正常工作..它返回带有查询结果的选项列表。

此外,其余代码似乎是正确的。 jQuery假设将来自getcategory.php的输出插入到id('#optioncategory')中,但是没有。

我已经阅读:

http://www.lisenme.com/dynamic-dependent-select-box-using-jquery-ajax-php/

但这完全没有帮助,因为我的代码是相似的并且具有相同的结构。

有任何修复建议吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

代码不完整。标头上缺少脚本:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

此致