请帮我这个ajax / javascript / php

时间:2010-07-27 16:23:17

标签: php javascript ajax drop-down-menu

我想在这里创建一个链式列表。我希望用户在前4个下拉列表中选择一些内容,一旦选择了最后一个,则应该弹出另一个。我现在只是测试我的代码,由于某种原因,我的代码没有显示最后一个输入被更改时应该显示的下拉列表。

这是我的java脚本

function GetXmlHttpObject(){
    var objXMLHttp = null;
    if(window.XMLHttpRequest){
        objXMLHttp = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
    return objXMLHttp;
}

function stateChanged(n){
    if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
      alert(xmlHttp.responseText);
        document.getElementById("yearSelect").innerHTML = xmlHttp.responseText;
    }
}
function showTest(v,p,r){
  alert("HI");
}

function showBoxes(v,p,r){
    xmlHttp=GetXmlHttpObject();
    url="";
    if(v == 1){
        //by year
        xmlHttp.onreadystatechange=stateChanged("yearSelect");
        url = 'result.php?sid=' + Math.random() + '&type=1&product=' + p + '&vendor=' + r;

    }else if(v == 2){
        xmlHttp.onreadystatechange=stateChanged("monthSelect");
        url = 'result.php?sid=' + Math.random() + '&type=2&product=' + p + '&vendor=' + r;
        //by month
    }else if(v == 3){
        xmlHttp.onreadystatechange=stateChanged("weekSelect");
        url = 'result.php?sid=' + Math.random() + '&type=3&product=' + p + '&vendor=' + r;
        // by week
    }
    //url.replace(" ","%20"); <-- Do I need to do this?
    alert(url);
    xmlHttp.open("GET",url,true);
    xmlHttp.send();
}

这是我的结果.php。现在,它很简单,只返回选择标签。

    <?php
        ?>
        <select>
            <option value=2001>2001</option>
        </select>
        <?php 
    ?>

这是用户看到的第一件事。这里使用了一些像getClients()这样的php方法,只是把一些东西放在我的下拉中。

<html>
    <head>
        <title>LeadQual Reporting</title>
        <script language="javascript" src="../lqcharts/fusioncharts_js/FusionCharts.js"></script>
        <script language="javascript" src="ajax.js"></script>
    </head>

    <body>
        <div>

            <form method='post' action='result.php'>

                <select name ='client'>
                <?php 
                    $clients = ChartData::getClients();
                    foreach($clients as $k){
                        echo "<option value='$k'>$k</option>";
                    }
                ?>
                </select>
                <br/>

                <select name="products" id="productsResult">
                    <option>
                    <?php 
                        $products = ChartData::getProducts();
                        foreach($products as $p){
                            echo "<option value='$p'>$p</option>";
                        }
                    ?>
                    </option>
                </select>
                <br/>

                <select name="vendors" id="vendorsResult">
                    <option>
                    <?php 
                        $vendors = ChartData::getVendors();
                        foreach($vendors as $v){
                            echo "<option value='$v'>$v</option>";
                        }
                    ?>
                    </option>
                </select>
                <br/>
                <select name="view" id="chooseView" onchange="showBoxes(this.value, document.getElementById('productsResult').value, document.getElementById('vendorsResult').value)">
                    <option value=0>Select Option</option>
                  <option value=1>By Year</option>
                  <option value=2>By Month</option>
                  <option value=3>By Week</option>
                </select>

                <div id="yearSelect">

                </div>

                <div id="monthSelect">

       </div>

       <div id="weekSelect">

       </div>

            </form>
        </div>
        <div>
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

我注意到你的2个选择列表中你有选项

<select name="vendors" id="vendorsResult"> 
                    <option> 
                    <?php  
                        $vendors = ChartData::getVendors(); 
                        foreach($vendors as $v){ 
                            echo "<option value='$v'>$v</option>"; 
                        } 
                    ?> 
                    </option> 
                </select> 

应该是:

<select name="vendors" id="vendorsResult"> 
                    <?php  
                        $vendors = ChartData::getVendors(); 
                        foreach($vendors as $v){ 
                            echo "<option value='$v'>$v</option>"; 
                        } 
                    ?> 
                </select> 

此外,我只是通过您的代码进行了快速扫描,我无法看到您针对您的ajax内容显示的div目标: - | 如果您使用Firefox的插件Firebug,您将看到您的ajax调用是否正常工作。

也是为了你的AJAX调用,为什么不使用JQuery,一个让你的代码看起来清晰,两个,你可以选择你想要的ajax内容出现的位置。

http://api.jquery.com/category/ajax/