如何在 HTML / Javascript 页面中插入 PHP 下拉菜单

Posted 2023-05-07

【中文标题】如何在 HTML / Javascript 页面中插入 PHP 下拉菜单

【英文标题】：How to insert a PHP dropdown in a HTML / Javascript page

【发布时间】：2011-07-17 12:59:07

【问题描述】：

好的，这是我的第二篇文章，请接受我是一个完全的新手，愿意学习，花了很多时间在各种网站上寻找答案，而且我几乎到达了我需要去的地方（至少对于这一点）。

我有一个网页，其中包含大量 javascript 函数，它们一起使用谷歌地图 API 生成具有各种线条等的谷歌地图。

我还有一个 mysql 数据库，里面有一些信息。 我创建了一个 php 脚本来动态生成一个包含数据库信息的下拉框。 （而且那一点似乎工作正常） - http://www.bournvilleconservatives.com/temp/select.php

我现在需要做的是让那个下拉框出现在我已经拥有的 html/Javascript 页面中，这样当用户从列表中选择某些内容时，它会调用一个带有所选值的 javascript 函数。

我被告知我需要使用 AJAX 来拉入盒子，并使用 innerhtml 来显示它，但我真的不知道怎么做，并且可以用一个类似的例子来帮助我。

我会将 PHP 放在 html 页面中，但该页面实际上包含在 Joomla 中！包装器，所以这一切都相当复杂。

提前致谢。

【问题讨论】：

你在运行什么 javascript 库？在.. Joomla？你可以在 ajax 调用中关闭它，而不会在 JS 中弄脏你的手

这是第一个问题：***.com/questions/5338092/…

没有像“PHP 下拉菜单”这样的东西 ;)

【参考方案1】：

jQuery 解决方案

如果您愿意使用jQuery，它将极大地帮助您访问 DOM、进行 Ajax 调用等。让我在jQuery中给你一个解决方案：

首先，将一个 div 放入 HTML（这将存储您的选择框）：

<div id="i_want_my_select_here"></div>

然后把这段代码放在你的HTML末尾</body>之前。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() 
    $('#i_want_my_select_here').load('/temp/select.php');
  );
</script>

在第一个脚本标签中，我们包含了来自 Google 的 CDN 的 jQuery 库。其次，我们编写我们的 Javascript/jQuery 代码。 .load() 函数可以轻松进行 Ajax 调用并将响应加载到 HTML 元素中。

您可以看到这比我其他答案中的所有代码要容易得多:)。

【讨论】：

真的，你是神！这（几乎）完美地工作。它将选择框带到我需要它的页面上，并带有来自数据库的值。最后一部分（然后我保证让你一个人呆着（直到下一次））是....愚蠢的问题 463，我如何让它运行一个 javascript 函数，从列表中传递所选项目的值。我需要在 php 中还是在 html / javascript / jquery. javascript 函数显然在我们将下拉框带入的 html/javascript 页面上。再次感谢。 （使用 jQuery 选项）

你想在加载函数完成后做一些jquery（所以你必须在加载函数中使用回调）。您必须将更改事件处理程序附加到那里的选择元素。

【参考方案2】：

如果您使用prototype，您可以使用Ajax.Request 或Ajax.Updater，但您应该有一个父 div 用于替换/插入。

请求示例：

new Ajax.Request('select.php', 
  method: 'post',
  onSuccess: function(r) 
    var select = r.responseText;
    $('parent_div').update(select);
  
);

带有更新程序的示例：

new Ajax.Request('parent_div', 'select.php',  method: 'post' );

【讨论】：

顺便说一句，您不必使用method: post。默认方法是'get'，我只是习惯性地使用POST。

【参考方案3】：

首先，Ajax示例（取自tizag.com并修改），Javascript代码来了：

var ajaxRequest;  // The variable that we will put an XMLHTTPRequest object in

//We try to create an XMLHTTPRequest object, 
//it is the object that lets us use Ajax

try
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
 catch (e)
    // Internet Explorer Browsers
    try
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
     catch (e) 
        try
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         catch (e)
            // Something went wrong
            alert("Your browser broke!");
            return false;
        
    


// Create a function that will receive data sent from the server
// and do stuff with it (this function will only run, 
// when the data arrives back from the server!)
ajaxRequest.onreadystatechange = function()
    if(ajaxRequest.readyState == 4) //if request is successful
           //HERE COMES THE DOM INSERTION
    


//We call the PHP file
ajaxRequest.open("GET", "/temp/select.php", true);
ajaxRequest.send(null); 

基本上发生的事情是通过 XMLHTTPRequest 我们调用了您的 PHP 文件。当响应（PHP 文件的输出）到来时，ajaxRequest.onreadystatechange 将立即运行。所以无论我们想对收到的数据做什么，我们都必须在我写的//HERE COMES THE DOM INSERTION的地方做。

我们希望将输出插入 HTML。要采取最简单的方法，首先在 HTML 中您希望选择出现的确切位置创建一个 div/span（定义 ID 非常重要）。

<div id="i_want_my_select_here"></div>

然后，这里出现了替换 //HERE COMES THE DOM INSERTION 的 Javascript。

//use the id to get Javascript access to the DIV
var div=document.getElementById('i_want_my_select_here');
//put the output of PHP into the div
div.innerHTML=ajaxRequest.responseText;