Question

我有许多不同的PHP脚本，可以从MySQL数据库中提取不同的信息。目前，您必须加载一个页面以显示其中的SQL查询。

我想创建一个下拉菜单，以便在单击其中一个选项时，它会运行特定的PHP脚本，并在下拉列表下方的同一页面上显示结果。

下面是我到目前为止的HTML（我使用的是我在http://www.w3schools.com/php/php_ajax_database.asp找到的模板）

我想要它，以便说如果单击Billing将运行并显示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>`

Answer 1

首先，将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

从下拉列表中选择一个选项时运行的特定php脚本

1 个答案: