使用下拉列表，JavaScript和PHP更改div的内容

Question

我是菜鸟，但是如果您能帮助我找到答案，我会很乐意为此坚持的；）

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

到目前为止，这就是我所拥有的：在主文件（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>';
}

在include / 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中的内容会重新加载，我可以看到加载器-但我对如何链接在select下拉列表中选择的选项以更改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（）使用某些变量，并且对于各种变量组合，输出代码与此类似：

回声''，showfans（$ restaurantnames，$ restaurantids，$ restauranturl），'';

Answer 1

n00b！ 好吧，坚持走:-)

您正在将'facebook-midcut'传递给您的categoryAjaxData()函数。 最终的DOM查找是否知道您的意思是带有id的div还是具有该类的div？ 如果您使用的是jquery之类的libray，则不进行进一步分类就不会知道您指的是哪个节点。 我猜想您正在尝试使用该类，因此您不能使用getElementById() 。

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

您是否在使用某种js库？ 最好查看ajaxData函数，因为问题很可能在那里。

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

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

更新：

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

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);">