使用sql结果集中的ajax动态创建复选框

时间:2013-07-22 05:13:02

标签: html sql ajax dynamic checkbox

我希望每次从<select>标签更改选择时都使用ajax动态创建复选框,请参阅以下屏幕截图,了解相关的表单部分:< / p>

snippet http://i39.tinypic.com/2ik5xg8.png

注意:队列”下的复选框应该是动态的。

目前,当您更改团队的值时,它会获取团队名称(在本例中为“Test”),然后使用ajax(POST)返回该团队的Manager名称。

我想要它做的是查找另一个表,其中列出了与每个团队相关联的“队列”;我将在“经理名称”字段的标签中添加“onchange”属性。

以下是我目前用于完成团队 =&gt;的代码经理名称动态填充:

<script>
        window.onload = function() {
            getManager($("#team").val());       
        }

        function getManager(team) {
            $.ajax({
                type: "POST",
                url: "getManager.php",
                data: {team:team}
            }).done(function( manager ) {
                $("#manager_name").val(manager);
            });
        }
</script>

以下是它使用的getManager.php文件:

<?php

require("../../database/db.php");

$mysqli = new db("nab_reporting");

if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}

$team=$mysqli->real_escape_string($_POST['team']);

$result = $mysqli->query("SELECT manager_name FROM team WHERE teamname = '".$team."'");

$row = $result->fetch_assoc();

echo $row['manager_name'];

mysqli_close($mysqli);

?> 

记住上述作品;我现在需要一种方法来使用管理器名称字段的onchange属性,该字段将使用ajax(类似于上面),向另一个php页面传递当前在该字段中的值(在这个案例Kane Charles)并将返回一个结果集(数组或JSON可能?),其中包含数据库中与该Team名称匹配的所有队列的列表。

以下是每个不同位的html代码:

TEAM

<select name="team" id="team" required="required" onchange="getManager(this.value)">
               <?php 
                    include(__DIR__ . "/../../database/db.php");
                    $db = new db("nab_reporting");
                    $result = $db->query("SELECT teamname FROM team");
                    while ($row = $result->fetch_assoc()) {
                        echo "
                        <option value=\"" . $row['teamname'] . "\">" . $row['teamname'] . "</option>
                        ";
                    }
                    $db->close();
                 ?>
</select>

MANAGER NAME

<input type="text" name="manager_name" id="manager_name" required="required" onchange="getQueues(this.value)">

QUEUES

<label>
    Queues
</label>
<div id="queue_options">
    <!-- queues dynamically created here -->
</div>

我需要删除 queue-options 的内容并将其重置为仅与当前团队相关联的队列;我没有做过很多关于ajax的事情,所以我为什么要在这里发帖。

1 个答案:

答案 0 :(得分:2)

此修订应符合您的要求

PHP

// make an array to hold the queues
$data = Array();

// Fetch the rows of all the queues
$res = $mysqli->query("SELECT * FROM the_queue_table WHERE manager='" . $_GET["manager"] . "'");

// loop through all the rows and push the queues into the data array
while(($row = mysql_fetch_object($res)) !== false)
{
    array_push($data, $row->queue);
}

// return the data array as a json object
echo json_encode($data);

的JavaScript

// get the page and send the manager name to filter with
$.get("file.php?manager=" + managerName, function(page)
{
    // parse the json into an object
    var data = $.parseJSON(page);

    // remove existing checkboxes
    $("#queue_options").children().remove();

    // add checkboxes to the div
    for (var item in data){
        $("#queue_options").append("<input type=\"checkbox\" value=\"" + item + "\" />" + item + "<br />");
    }
});