0

我在 javascript 中有一个下拉功能，其中只有汽车以选项形式显示。当用户点击“Acura”时，模型会出现，“Vigor”、“RSX”......

选择模型后，零件组应该会出现，但不会出现。我无法弄清楚第三个选项应该如何显示。谢谢 这是我的代码

getCars.php

<?php

$models = array(
"acura" => array("CL", "EL", "Integra", "Legend", "MDX", "NSX", "RL", "RSX", "SLX", "TL", "TSX", "Vigor"),
"alfa" => array("1750", "Alfetta", "GTV-6", "Romeo 164", "Romeo Milano", "Spyder", "Spyder 1600 Duetto", "Spyder1600", "Veloce 2000")

);

$partgroup = array(
"Accessories" => array("Bed Cover", "Bed Liner", "Bed Rails", "Car Cover", "Converitible Boot Cover", "Jack", 
"Luggage Rack", "Spare Tire Cranks", "Spare Tire Holder", "Tool Kit")

);

//echo "Cars: " . $_GET['cars'];


if(isset($_GET['cars'])) {

    $c = $_GET['cars'];
    $p = $_GET['partGroup'];
        if(isset($models[$c])) {
            for($i = count($models[$c]) -1; $i>=0; $i-- ) {
                echo "<option value='" . $models[$c][$i] . "'>" . $models[$c][$i]. "</option>";
            }
        }

        else if(isset($partgroup[$p])) {
                for($i = count($partgroup[$p]) -1; $i>=0; $i-- ) {
                echo "<option value='" . $partgroup[$p][$i] . "'>" . $partgroup[$p][$i]. "</option>";
            }
            }

}


?>

index.php

<html>
<head>
<title></title>
</heady>

<body>

<form name="form1" action="submit.php" method='post'>
Please choose a car model<br/>
<select name="cars" onchange="window.getCars()">
<option disabled>Select Car model </option>
<option value="acura">Acura</option>
<option value="alfa">Alfa</option>
</select>

<br/>



<input type="submit" name="submit" value="submit">
</form>



<script type="text/javascript">
    function getCars() {
        var xmlhttp;
        try {
            xmlhttp = new XMLHttpRequest;

        }catch(e)
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        if(xmlhttp) {
            var form = document['form1'];
            var cars = form['cars'].value;

            xmlhttp.open("GET", "http://localhost/drop/getCars.php?cars="+cars, true);
            xmlhttp.onreadystatechange = function ()
            {
                if(this.readyState == 4) {
                    var s = document.createElement("select");
                    s.name = "model";
                    s.innerHTML = this.responseText;

                    if(form['model']) {
                        form.replaceChild(s, form['model']);
                    }           


                    else
                        form.insertBefore(s, form['submit']);

                    getpartGroup();
                    //alert(this.responseText);
                }
            }
            xmlhttp.send(null);
        }
    }

</script>

<script type="text/javascript">
    function getpartGroup() {
        var xmlhttp;
        try {
            xmlhttp = new XMLHttpRequest;

        }catch(e)
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        if(xmlhttp) {
            var form = document['form1'];
            var cars = form['partGroup'].value;

            xmlhttp.open("GET", "http://localhost/drop/getCars.php?partGroup="+partGroup, true);
            xmlhttp.onreadystatechange = function ()
            {
                if(this.readyState == 4) {
                    var s = document.createElement("select");
                    s.name = "partGroup";
                    s.innerHTML = this.responseText;

                    if(form['partGroup']) {
                        form.replaceChild(s, form['partGroup']);
                    }           


                    else
                        form.insertBefore(s, form['submit']);

                    //alert(this.responseText);
                }
            }
            xmlhttp.send(null);
        }
    }

</script>




</body>
</html>
4

1 回答 1

0

使用流行的 JS 框架之一（如 jQuery、原型、主干或下划线）更简单、更简洁。这些都支持 ajax 和更新 DOM，查看一些教程，这比手动弄乱 xmlhttp 容易得多。

但是，如果您使用的是 Firefox，您可以在 chrome 开发控制台（ctrl-shift-i，右键单击，切换 Log XMLHttpRequests）或 firebug 控制台中查看 ajax 请求的位置和方式。打开控制台，选择一辆车，ajax 请求应该会出现在控制台中，您可以点击查看结果。

调试愉快！

于 2013-03-17T22:37:08.633 回答