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