使用下拉列表,javascript和PHP更改div的内容

时间:2011-02-03 16:42:09

标签: php javascript function drop-down-menu

我是一个菜鸟,但如果你帮我找到答案,我会很乐意为它做点什么;)

我有一个数组$ 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函数传递。

e.g。 $ barnames,$ barids,$ barurl&amp; $ 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()函数中的变量。

E.g。 我想在下拉列表中显示“Bar”:

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),'';

2 个答案:

答案 0 :(得分: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)是div的实际更新发生的地方,但你从未传递过xmlHttp对象。这是否意味着成为一个全球性的对象?如果没有,那么你肯定需要将它传递给DescriptionstateChanged()函数,我建议它不应该是一个全局对象。如果DescriptionstateChanged()函数是实际更新div的位置,你也可以发布这个函数吗?

答案 1 :(得分:0)

您可能想要更改此内容:

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