2010-04-09 63 views
4

我有一個包含兩個下拉列表填充在PHP中的下拉列表中動態

我需要根據第一個下拉列表中選擇的結果來填充第二個中的小PHP頁面....這是可能?換句話說,我需要使用從第一個下拉列表中選擇的值,並在用於填充第二個下拉列表的dB查詢中使用它(但是應該在選擇第一個下拉列表時填充該值)。

如果這是可能的任何提示嗎?(你可以認爲我能夠填充第一個下拉列表從DB)

感謝

回答

1

你將不得不使用AJAX來發送第一個下拉的選擇然後您可以查詢數據庫並生成第二個下拉列表並將其發回給用戶。

2

選項1:將文檔中第二個選擇的數據作爲隱藏元素或JS對象嵌入。第一個選擇的事件處理程序將填充第二個選擇。 A List Apart有example dynamic select page

選項2:使用AJAX。當第一個選擇更改時,向服務器請求第二個選擇的內容,然後填充它。使用JS庫(如jQuery),這變得非常容易。

$('select#one').change(
    function (evt) { 
    $('select#two').load('/thing/'+this.value); 
    } 
); 

「/事/ <VAL>」標識您的服務器端腳本生成基於「<VAL>」(使用你的服務器的重寫設施項目的列表,以解決實際腳本的URL路徑)。您可以簡單地讓它始終生成<選項>元素,但更好的設計將包括一種指定結果格式的方式,因此它可以使用JSON或其他格式輸出列表<li>。

$('select#one').change(
    function (evt) { 
    $('select#two').load('/thing/'+this.value, {fmt: 'option'}); 
    } 
); 
+1

我只補充一點,所涉及的數據集和性能需求的大小將決定你選擇哪條路徑。如果下載量太大,則需要使用AJAX。如果您的客戶端無法使用AJAX,或者您希望限制與服務器的連接或涉及大量查詢,請使用JS對象/數組。 – webbiedave 2010-04-09 22:28:45

0

您將需要異步回調到服務器,無需重新加載頁面。 (我懷疑你真的想要一個按鈕回到服務器)所以AJAX是可以做到這一點的。將AJAX調用添加到您的第一個下拉列表的onchange事件處理程序,該處理程序將選定內容發佈回服務器並返回第二個下拉列表的內容。當AJAX調用返回新值時,您將使用它爲第二個下拉列表構建內容。當然,除了實際的服務器部分之外,這些大部分都是在Javascript中完成的,這部分將保留在PHP中。

0

有兩種方法可以做到這一點。老派「選擇一個選項並提交以重建頁面」方法,其工作非常普遍,以及新穎的AJAX方法,以加載第二個下拉列表的內容而不刷新頁面。

兩者都有優點/缺點,所以它歸結爲什麼是最適合您的目的。 oldschool方法根本不需要任何javascript,但是由於它通過服務器完成表單的往返操作,因此您將看到「清除窗口並重新繪製頁面」閃爍。

AJAX方法繞過了刷新閃爍,但也無法在JavaScript禁用的瀏覽器上工作。它確實需要更多的代碼(客戶端)來處理AJAX調用和下拉列表的填充,但服務器端代碼對於兩種方法幾乎是相同的:相同的查詢,相同的檢索循環,只是不同的輸出方法。

0

@outis在jquery中有好點使用.change否則使用onchange事件在select代碼中。

<select id='my_select' onchange='javascript:myfunc()'> 
<option value='a'>a</option> 
. 
. 
<option value='z'>z</option> 

function myfunc(){ 
//write code to populate another dropdown based on selected value 

} 

你可以看到這個Dynamically Populating Dropdown Based On Other Dropdown Value