PHP jQuery动态填充SELECT

Question

一直在寻找解决方案，并发现堆栈溢出的一些帮助，但在大多数情况下，我发现的例子没有使用从数据库查询形成的数组。这里是什么，我想实现一些代码...

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

我想创建两个元素，一个是商店和其他工作人员，但我想基于商店客户端来筛选员工。因此，如果用户从第一个下拉列表中选择“悉尼”，那么他们只会在第二个下拉列表中选择在悉尼商店工作的员工。然后，如果用户从第一个下拉列表中选择“伦敦”，则悉尼工作人员将由伦敦工作人员替换，等等。

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

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

Answer 1

二次下降，是的，你需要一些阿贾克斯。

您可以创建一个脚本来获取与商店相关的结果，并发回选项listm witch插入到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);});" 

在这ecample添加ID到你的第二个选择（staff_select）。

作为解释：当第一个下拉改变时，它发送一个请求到getStaff.php，store_id作为POST参数。根据商店标识，php sript获取syff，并为您的辅助选择带回选项标签列表。比jquery添加'数据'你的第二选择和VOILà！

希望这是明确的，因为它是一堆小东西在一起，将使它的工作。对不起，如果它似乎马虎作为答案，但它很简单，一旦你知道它。

Answer 2

您需要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部分：POST

访问数据库使用此值

回波（发送响应）

1. 获取价值。您发送一连串的文字（HTML），实际上这不是很专业，但可以用于演示目的。专业人士发送JSON，因为JSON的重量更轻。

---

JavaScript部分（第二部分）

在回调函数
1. ，则经由所述第一参数接收响应数据
2. 插入在第二个下拉新数据（因为数据已经是HTML，你不需要处理它）

Answer 3

我会尽力帮助你就像我可以解释它一样。

mysql_query，你可以使用mysqli顺便说一句，mtsql被递减，返回一个结果集。 这意味着您将拥有查询中的所有记录。在使用它之前，你需要将结果放下。这是通过使用诸如mysql_fetch_assoc，mysql_fetch_row等方法完成的。有一些像获取数组但是我不掌握它，所以我将使用fetch assoc来进行回复。

因此当你夜的结果设置你的情况，$商店& $员工，你再打电话对结果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>"; 

我storngly建议你采取alook在http://php.net/manual/en/function.mysql-fetch-array.php巫婆会做同样的一个FETCH_ASSOC BU与该columname关键的数组。

Answer 4

花了下午学习如何做到这一点，它工作得很好。在这里为他人发布新代码....

感谢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(); 
}