onchange无法使用JavaScript在表中工作

因此，我很难弄清楚为什么我的

onchange

事件没有触发。首先是我的表和JavaScript的副本

表:

<form name="form1" action="submit.php" method='POST'>
    <table border="0" class="signUp">
    <tr><td align="center" class= "signUpfont"> Sign up for FREE </td></tr>
    <tr><td><input type="text" text="First Name" class='signUpinput' id="fname" name="fname" placeholder="First Name" /></td></tr>
    <tr><td><input type="text" class='signUpinput' id="lname" name="lname" placeholder="Last Name"/></td></tr>
    <tr><td><input type="text" class='signUpinput' id="email" name="email" placeholder="Email"/></td></tr>
    <tr><td><input type="text" class='signUpinput' id="email2" name="email2"  placeholder="Re-enter Email"/></td></tr>
    <tr><td><input type="password" class='signUpinput' id="pass" name="pass" placeholder="Password"/></td></tr>
    <tr><td>
                    <select name="country" onchange="getStates()" style="color: white; background-color: #2B4478;">
        <option value="0">Select State</option>
        <option value="louisiana">Louisiana</option>
        <option value="texas">Texas</option>
        <option value="alabama">Alabama</option>
        <option value="mississippi">Mississippi</option>
    </select></td>
            </tr>
            <tr>
        <td><select name="school" style="color: white;background-color: #2B4478;">
        <option value="">Select School</option>
    </select></td></tr>

    <tr><td><input type="submit" name="submit" value="Sign Up" style="color:white; background-color:#2B4478; width: 100px;margin-left: 52px;"></td></tr>
</table>

免费报名
选择状态
路易斯安那州
得克萨斯州
阿拉巴马州
密西西比
选择学校

Javascript:

<script type="text/javascript">
    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", "getSchools.php?country="+country, true);

                xmlhttp.onreadystatechange = function ()
                {
                    if(this.readyState == 4)
                    {
                        var s = document.createElement('select');
                        s.name = "school";
                        s.style.color = "white";
                        s.style.background = "#2b4478";
                        s.innerHTML = this.responseText;

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

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

                xmlhttp.send(null)
            }
    }

函数getStates（）
{
var-xmlhttp；
试一试{
xmlhttp=新的XMLHttpRequest；
}捕获（e）
{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
if（xmlhttp）
{
变量形式=文件['form1']；
var country=形式['country'].值；
open（“GET”，“getSchools.php？country=“+country，true”）；
xmlhttp.onreadystatechange=函数（）
{
if（this.readyState==4）
{
var s=document.createElement（'select'）；
s、 name=“学校”；
s、 style.color=“白色”；
s、 style.background=“#2b4478”；
s、 innerHTML=this.responseText；
if（表格[“学校]）
{
表格.代替儿童,表格"学校";；
}否则
表格。在[提交]表格之前插入；
}
}                   
xmlhttp.send（空）
}
}

---

如果有人指出我做错了什么，我将不胜感激。如果我将两个下拉列表放在同一个位置并以此启动表单，脚本将工作，但我无法获得表的其余信息。

您的函数正在正确启动。尝试在调试器中的函数上设置断点，并查看您得到的错误/或者断点是否被击中

看

确保onchange事件触发时getStates（）存在，即定义它的脚本应该在它之前已经执行过

确保HTML在执行时可以访问“getStates”函数。这是一把小提琴：

Fiddle做的事情有点奇怪，所以我不得不将函数分配给一个全局变量：

getStates = function getStates() {...}

---

小提琴一旦这样分配就可以工作。

也许可以把它放在onchange=“getStates（）；”@msbodetti感谢您的回复，我尝试添加分号，但仍然有相同的问题：(

getStates = function getStates() {...}