PHP jQuery动态填充SELECT

Question

一直在寻找解决方案，并找到了一些有关堆栈溢出的帮助，但是在大多数情况下，我发现的示例并未使用由数据库查询形成的数组。 这是我想要实现的一些代码...

$stores = mysql_query("SELECT * FROM Stores");
$staff = mysql_query("SELECT * FROM Staff");

我想创建两个元素，一个用于商店，另一个用于员工，但是我想根据商店客户端过滤员工。 因此，如果用户从第一个下拉列表中选择“悉尼”，则在第二个下拉列表中仅向他们显示在悉尼商店工作的员工。 然后，如果用户从第一个下拉列表中选择“伦敦”，则悉尼工作人员将被伦敦工作人员替换，依此类推。

我的服务器端脚本是使用PHP完成的，我可以使用PHP创建两个下拉菜单。 但是我被困在jQuery上，从第二个下拉列表中删除了我不想要的。

我知道这是可能的，因为我一直都在使用它。 我已经看到了许多有关如何管理此问题的示例，但是没有一个示例使用PHP数组中的数据插入。

Answer 1

您需要ajax。

当用户在下拉列表中选择某项时，将触发您可以处理的事件。 在此过程中，您将采用jQuery（'＃id_dropdown'）。val（）之类的选择值，并通过ajax发送此值（我喜欢使用POST，因为您不会遇到GET请求大小限制）。

您可以使用php在服务器端进行处理，并使用选定的值并通过ajax发送来访问数据库。 如果第二个下拉列表的结果正确，则可以通过echo输出。

最后，当响应返回给jQuery时，您可以在新的下拉列表中插入所有选项。

---

JAVASCRIPT部分：

1. 将事件绑定到第一个下拉菜单
2. 获取下拉菜单中所选选项的值
3. 提出Ajax请求

这是一些示例代码：

 var parameters='value_selected='+value_dropdown;
 jQuery.Post({
       url: '/destiny_when_I_process',
       data: parameters, 
       success: func_callback

 });
//here you can imagine a pause, because PHP is processing the data you send by post
//....  
//....
//this part is executed when php send the information 
function func_callback(response_from_php){
       jQuery('#second_dropdown').html(response_from_php); 
}

---

PHP部分：

1. 从POST获得价值
2. 使用此值访问数据库
3. 回声（发送响应）。 您发送了一段文本（以HTML格式），这确实不是很专业，但是可以用于演示。 专业人士发送JSON，因为JSON的重量较轻。

---

JAVASCRIPT部分（第二部分）

1. 在回调函数中，您通过第一个参数接收响应数据
2. 在第二个下拉菜单中插入新数据（由于数据已经是HTML，因此您无需对其进行处理）

Answer 2

对于第二个下拉列表，是的，您需要一些ajax。

您可以创建一个脚本，以获取与商店对应的结果核心，然后将选项listm女巫插入ooption中。

使用jquery和php，您需要做一些事情。

一个php文件以获取结果并返回选项。 （假设getStaff.php）

<?php 
//get the store id by post is it is set
if (isset($_POST['store->id']) $store_id = mysqli_real_escape_string($_POST['store_id']);

//get the data !! notice the WHERE caluse
$r = mysql_query("SELECT * FROM Staff" *WHERE store=''$store->is*);

//split the data in the array
$staffs=array();
    while ($assoc = mysql_fetch_assoc($r)) {
          //Varialbe = $assoc['colum_name'];
          $staff->id=$assoc['id'];
         $staff->name=$assoc['name'];
        //and so on for each colum in your table.
        array_push($staffs, $assoc);
   }

//echo the result as option
foreach ($staffs as $staff) echo "<option value='$staff->id'>$staff->name</option>";
?>

在您的第一选择中，添加

onchange="$.post('getStaff.php', {store_id:$(this).val()}, function (data){ $('#staff_select').html(data);});"

并将ID添加到此ecample中的第二个选择（staff_select）。

作为说明：当第一个下拉列表发生更改时，它将以store_id作为POST参数发送到getStaff.php的请求。 php sript根据商店ID获取syaff，并为您的次级选择带回选项标签列表。 比起jQuery，将“数据”添加到您的辅助选择中，瞧！

希望这能使它正常工作，因为这是一堆小事情。 很抱歉，答案似乎很草率，但是一旦您知道了，它真的很简单。

Answer 3

花了下午的时间学习如何做，并且效果很好。 在这里为其他人发布新代码。

感谢本教程的http://forum.codecall.net/topic/59341-php-sql-jquery-and-ajax-populate-select-boxes/ 。

在此感谢大家。

首先构建PHP：

function agency_select() {
include('../include/dbase.php');
$agencies = $pdo->query("SELECT * FROM agency WHERE Status='active' ORDER BY AgencyName");
$opt = '';
while ($age_array = $agencies->fetch(PDO::FETCH_ASSOC)) {
    $opt .= '<option value="'.$age_array['AgencyId'].'">'.$age_array['AgencyId'].' - '.$age_array['AgencyName'].' - '.$age_array['AgencySuburb'].'</option>'."\n\t\t\t\t\t\t\t";
}
return $opt;
}

这两个元素的HTML：

<label for="AgencyId">Client/Agency:</label>
    <select class="uniform" id="AgencyId" name="AgencyId" style="width: 400px; overflow-x: hidden">
        <?php echo agency_select(); ?>
    </select>

<label for="Contact">Contact: </label>
    <select class="uniform" id="Contact" name="Contact" style="width: 300px; overflow-x: hidden">
        <option value="">----Select Client/Agency----</option>
    </select>

AJAX文件：

if(isset($_POST['AgencyId'])) {

include('../include/dbase.php');

$option = '<option value="">----Select Contact----</option>';

$query = $pdo->prepare("SELECT * FROM client WHERE AgencyId= ?  AND Status='active' ORDER BY FirstName");
$result = $query->execute(array($_POST['AgencyId'])));

while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $option .= '<option value="'.$row['id'].'">'.$row['FirstName'].' '.$row['LastName'].'</option>';
}

echo $option;
}

jQuery的：

$(document).ready(function () {
    update_contacts();
});

function update_contacts() {
$('#AgencyId').change(function() {
    $('#Contact').fadeOut();
    $('#loader').show();

$.post('../ajax/ajax_contact_select.php', {
        AgencyId: $('#AgencyId').val()
        }, function (response) {
        setTimeout("finishajax('Contact', '"+escape(response)+"')", 400);
        });
        return false;
    });
}

function finishajax(id,response) {
    $('#loader').hide();
    $('#'+id).html(unescape(response));
    $('#'+id).fadeIn();
}

Answer 4

我会尽力为您提供帮助。

mysql_query，您可以使用mysqli btw，将mtsql递减，返回结果集。 这意味着您将拥有查询中的所有记录。 您需要先将结果整理一下，然后才能使用它。 这是通过使用mysql_fetch_assoc，mysql_fetch_row等方法来完成的。有一些类似fetch的数组，但我不掌握它，所以我将使用fetch assoc进行回复。

因此，一旦您设置了结果集（$ stores和$ staff），就可以对结果调用while循环以获取数据，如下所示：

    while ($assoc = mysql_fetch_assoc($r)) {
          //Varialbe = $assoc['colum_name'];
          $stores->id=$assoc['id'];
         $stores->name=$assoc['name'];
        //and so on for each colum in your table.
        array_push($stores, $assoc);
   }

然后，您可以根据需要导出它。 在你的情况下会像

foreach ($stores as $store) echo "<option value='$store->id'>$store->name</option>";

我强烈建议您看一下http://php.net/manual/en/function.mysql-fetch-array.php，女巫将对fetch_assoc bu执行相同的操作，并使用以columname作为键的数组。