使用下拉菜单、javascript 和 PHP 更改 div 的内容

Question

我是个菜鸟，但如果你帮我找到答案，我会很乐意接受它；）

我在数组 $cat_array 中有一个类别列表。 我想构建一个选择下拉列表，以便当我选择其中一个选项时，会将不同的变量传递给函数。

这是我到目前为止所拥有的： 在主文件（index.php）中，我调用一个函数：

makechoice($cat_array);

这指的是包含文件中的这个函数：

function makechoice($cat_array) {   
$dbz = new db();
$sim = new simple();
echo '<div class="choose-section">';
    echo '<select class="selbox" onchange="categoryAjaxData(\'facebook\',\'/includes/fancount.php\',this.value);">';
        foreach($cat_array as $cat) {   
            echo('<option value="'.$cat[0].'">'.$cat[1].'</option>');   
        }
    echo '</select>';
    echo 'Choose a section';
    echo '</div>';
    echo '<div id="facebook"><div class="facebook-midcut">',showfans($djnames, $djids, $djurl),'</div><div class="l-botcut"></div></div>';
}

在includes/fancount.php中，我基本上有很多不同的变量想要通过showfans传递功能。

例如 $barnames、$barids、$barurl 和 $barurl $restaurantname、$restaurantids、$restauranturl

showfans 函数使用这些变量来显示有关它们的一些数据。

这是我的 javascript 代码：

function categoryAjaxData(div,str,value)
{
    var url = str+'?catid='+value;
    ajaxData(div,url);
}

function ajaxData(div,str)
    {
        xmlHttp=GetXmlHttpObject();
        document.getElementById(div).innerHTML='<center><img src="images/loader.gif"></center>';        
        if(xmlHttp==null)
        {
            alert("Browser does not support HTTP Request")
            return
        }
            var url = str;
            xmlHttp.onreadystatechange = function(){ DescriptionstateChanged(div); };
            xmlHttp.open("GET",url,true);
            xmlHttp.send(null);
    }

function DescriptionstateChanged(div)
{
    if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
        document.getElementById(div).innerHTML=xmlHttp.responseText;
    }
} 

目前： 当前 facebook div 中的内容重新加载，我可以看到加载程序 - 但我一直不知道如何将选择下拉列表中选择的选项链接到更改 showfans() 函数中的变量。

例如 我希望在下拉列表中显示“酒吧”：

echo '<div id="facebook"><div class="facebook-midcut">',showfans($barnames, $barids, $barurl),'</div><div class="l-botcut"></div></div>';

我希望在下拉列表中显示“餐厅”：

echo '<div id="facebook"><div class="facebook-midcut">',showfans($restaurantnames, $restaurantids, $restauranturl),'</div><div class="l-botcut"></div></div>';

我希望有帮助！提前致谢：）

更新：

关于 fancount.php，我一直在寻找各种不同的选项 - 但我似乎无法让它们中的任何一个工作！

我想将下拉列表中的值传递到逻辑中，以便根据所选的变量，showfans() 使用某些变量，并且对于各种变量组合，输出代码看起来与此类似：

echo '',showfans($餐厅名称、$restaurantids、$restauranturl),'';

Answer 1

不！好的，别挡道 :-)

您正在将 'facebook-midcut' 传递给 categoryAjaxData() 函数。最终的 DOM 查找是否知道您指的是带有 id 的 div 还是带有该类的 div？如果您使用像 jquery 这样的库，则无需进一步分类，它就不会知道您指的是哪个节点。我猜您正在尝试获取该类，因此您无法使用 getElementById()。

您可能还想在 'includes/fancount.php' 的开头添加斜杠。在其开头添加斜杠意味着路径将从站点的文档根目录引用，而不是从站点内的当前位置引用。

你使用某种js库吗？查看您的 ajaxData 函数会很有用，因为问题很可能就在那里。

给你一个快速提示。了解何时在 PHP 中使用单引号和双引号。它将使您的代码更简单、更快。 echo "

"; 可以写成 echo '

'; code>

我会回来查看您是否已使用我要求的信息更新了您的帖子，然后我可以为您提供更多帮助。

更新：

我假设函数 DescriptionstateChanged(div) 是 div 实际更新发生的地方，但您从未将 xmlHttp 对象传递给它。这是一个全局对象吗？如果不是，那么您肯定需要将其传递给 DescriptionstateChanged() 函数，并且我建议它无论如何都不应该是全局对象。如果 DescriptionstateChanged() 函数是实际更新 div 的地方，您也可以发布这个函数吗？

Answer 2

您可能想要更改此设置：

echo '<select class="selbox" onchange="categoryAjaxData("facebook-midcut","/includes/fancount.php",this.value);">';

请

echo '<select class="selbox" onchange="categoryAjaxData(\'facebook-midcut\',\'/includes/fancount.php\',this.value);">';

注意代码的输出将如何成为无效的 HTML：

<select class="selbox" onchange="categoryAjaxData("facebook-midcut","/includes/fancount.php",this.value);">