使用下拉菜单、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 和 $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，我一直在寻找各种不同的选项 - 但我似乎无法让它们中的任何一个工作！

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

echo '',showfans($restaurantnames, $restaurantids, $restauranturl),'';

Answer 1

n00b！好吧，别挡道:-)

您正在将 'facebook-midcut' 传递给您的 categoryAjaxData() 函数。最终的 DOM 查找是否知道您是指具有 id 的 div 还是具有该类的 div？如果您使用的是 jquery 之类的库，那么如果没有进一步分类，它就不会知道您指的是哪个节点。我猜你正试图得到一个与类，所以你不能使用getElementById()。

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

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

给你一个快速提示。了解何时在 PHP 中使用单引号和双引号。它将使您的代码更简单、更快。 echo "<div id=\"facebook-midcut\">"; 可以写成echo '<div id="facebook-midcut">';

我会回来看看你是否用我要求的信息更新了你的帖子，然后我可以给你更多帮助。

更新：

我假设函数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);">