当表格开始时，Onchange 不适用于选择

Question

我在使用表单时遇到问题，并在该表单中使用 onchange 进行选择。当我在 2 选择之前开始表单时，它工作得很好，但是当我将表单移到表格之外（包括所有内容）时，onchange 将不起作用。关于为什么的任何想法？

这是我的表格：

<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><form name="form1" action="submit.php" method='POST'>   
                    <select name="country" onchange="window.getSchools()" 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>
    <br>
        <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>
    </form>
</table>

这是我的 onchange 函数：

<script type="text/javascript">
    function getSchools()
    {
        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)
            }
    }

Answer 1

您的事件没有被触发，因为您没有明确定义“window.getSchools”。所以你有两个选择。

选项 1

修复 onchange 内联处理程序：

<select name="country" onchange="getSchools()">
    <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>

定义您的活动：

getSchools = function()
{
    //put your code here
    alert("fired");
}

选项 2

保持相同的 html：

<select name="country" onchange="window.getSchools()">
    <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>

修复您的事件处理程序：

window.getSchools = function()
{
    //put your code here
    alert("fired");
}

可以看官方文档here

您还有格式不正确的 HTML。在关闭元素之前关闭元素。有关工作示例，请参阅此 jsFiddle。

我肯定会建议通过JavaScript documentation，刚开始时可能看起来很乏味，但相信我，它会在调试和故障排除方面为您节省相当多的时间:)