选择第二个链接下拉菜单时显示文本框

时间:2015-07-22 05:38:58

标签: javascript php jquery html ajax

我用ajax和php制作了两个链接的下拉菜单。我的index.php:

<html>

<head>
</head>

<body>
    <form name="form1" action="submit.php" method='POST'>
        <select name="country" onchange="window.getStates()">
            <option> Select Country</option>
            <option value="pakistan">Pakistan</option>
            <option value="india">India</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>
        <input type="text" id="area" style="display: none;" size="16" placeholder="
    Enter value"></input>
        <input type="submit" id="submit" style="display: none" name="submit" value="submit">
    </form>
    <script type="text/javascript">
    function show() {
        {
            document.getElementById('area').style.display = 'inline-block';
            document.getElementById('submit').style.display = 'inline-block';
        }
    }

    function getStates() {
        var xmlhttp;
        try {
            xmlhttp = new XMLHttpRequest;
        } catch (e) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xmlhttp) {
            var form = document['form1'];
            var country = form['country'].value;

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

                    if (form['state']) {
                        form.replaceChild(s, form['state']);
                    } else
                        form.insertBefore(s, form['submit']);
                }
            }
            xmlhttp.send(null);
        }
    }
    </script>
</body>

</html>

我的getStates.php代码:

<?php

$states=array(
"pakistan" => array("NWFP","Sindh","Bala","Punjab"),
"india" => array("delhi","gujrat","goa","U.P."),
"usa" => array("bgjs","hhtrs","Bhtrshts","Utah"),
"uk" => array("England","Scotland","Bahwgla","Punthwthjab")
);

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

?>

在index.php中,当我从第二个下拉列表中选择一个选项时,我希望文本框和提交按钮可以被整除。我怎么能以简单的方式做到这一点?请清楚慢,因为我是ajax的新手。

s.onchange=show();

无效。这只是一个随机的尝试,但我不知道为什么它是错的。谢谢!

0 个答案:

没有答案