特定的php腳本從下拉列表中選擇一個選項運行

我有許多不同的PHP腳本，從MySQL數據庫中提取不同的信息。目前您必須加載一個頁面才能調出其中的SQL查詢。特定的php腳本從下拉列表中選擇一個選項運行

我想創建一個下拉菜單，當其中一個選項被點擊時，它運行一個特定的php腳本並在同一頁面上顯示結果，在下拉列表下方。

下面是HTML我到目前爲止（我用的模板，我發現在：http://www.w3schools.com/php/php_ajax_database.asp）

我想它，這樣說，如果計費方式是點擊PHP文件「billingquery.php」將被運行，顯示，或者如果選擇All Users選項，將運行並顯示php文件「allusersquery.php」。

<html> 
<head> 
<script type="text/javascript"> 
function showUserGroup(str) 
{ 
    if (str=="") 
    { 
     document.getElementById("txtHint").innerHTML=""; 
     return; 
    } 
    if (window.XMLHttpRequest) 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    else 
    // code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    xmlhttp.open("GET","getusergroup.php?q="+str,true); 
    xmlhttp.send(); 
} 
</script> 
</head> 
<body> 

<form> 
<select name="usergroups" onchange="showUserGroup(this.value)"> 
<option value="">Select a User Group:</option> 
<option value="1">Billing</option> 
<option value="2">All Users</option> 
<option value="3">All Data</option> 
<option value="4">Next Option</option> 
</select> 
</form> 
<br /> 
<div id="txtHint"><b>User Group information and access rights will be listed here.</b> </div> 

</body> 
</html>`

來源

2012-02-15 Tom Anderton

爲什麼不使用[jQuery]（http://jquery.com/）？所有你需要做的就是一個ajax調用，它會取得結果並重新填充你的下拉菜單。 – afuzzyllama 2012-02-15 15:55:05

謝謝。雖然，我不知道該從哪開始！是否可以爲每個選擇分配一個動作，以便當它被選中時它將運行該特定的PHP腳本？ – 2012-02-15 15:58:43

開始與[互聯網]（http://www.joe-stevens.com/2010/02/23/populate-a-select-dropdown-list-using-jquery-and-ajax/） – afuzzyllama 2012-02-15 16:00:00

首先，jQuery庫添加到您的HTML - 最好的辦法是從CDN加載它像谷歌：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

然後，添加以下內容：

<script type="text/javascript"> 
$('[name="usergroups"]').on('change', function() { 

    var ajaxMethod = "default.php"; 

    switch($(this).val()) 
    { 
    case "1": 
     ajaxMethod = "billingquery.php"; 
     break; 
    case "2": 
     ajaxMethod = "allusers.php"; 
     break;     
    case "3": 
     ajaxMethod = "alldata.php"; 
     break;     
    case "4": 
     ajaxMethod = "nextoption.php"; 
     break;  
    } 

    $("#txtHint b").load(ajaxMethod); 

}); 
</script>

jQuery的功能非常強大，並且真正改變了以幫助開發人員關閉javascript開發。

JSFiddle Example

來源

2012-02-15 17:23:53

嗨沃倫，非常感謝這個答案，這看起來完全正確！但是，當我現在從下拉列表中選擇一個選項時，它不會執行任何操作。上面的default.php是指什麼？最終，當選擇案例1時，我希望billingquery.php中包含的sql查詢在下面被定位;當案例2被選中時，包含在allusers.php中的SQL查詢將被顯示等等。從我所瞭解的代碼中，它應該這樣做，但不能確定！感謝您的幫助。 – 2012-02-16 08:34:48

default.php是一個默認腳本，如果用戶選擇此選項，它可以顯示任何內容：它可能只是一條消息，指出「請從列表中選擇一個選項」或類似的東西。 – 2012-02-16 23:59:31

謝謝。但是，我仍然無法從下拉列表中選擇每個文件（billingquery.php/allusers.php）中包含的查詢來更新頁面嗎？乾杯。 – 2012-02-17 08:29:50

特定的php腳本從下拉列表中選擇一個選項運行

回答

相關問題