0

我正在修改注册表单，并希望使用 jQuery 来简化表单。

该站点的用户可以是任何一个Teachers，也可以是Donors两者。 Teachers有Donors不需要的字段，反之亦然。因此，我没有在表格中填满所有字段并通过询问他们的教学年级水平来混淆国际用户，而是实施了一个下拉列表，以便用户可以选择他们的角色，并且通过该append()方法可以看到唯一的必填字段。

这是我迄今为止构建的表格：

<g:formRemote name="register" url="[controller:'user', action:'register']" onSuccess="showFields()">
    <dl>
        <dt>User name</dt>
        <dd><g:textField name="username" value ="${user?.username }"/></dd>

        <dt>Password</dt>
        <dd><g:passwordField name="password" value = "${user?.password }"/></dd>

        <dt>Repeat Password</dt>
        <dd><g:passwordField name="passwordRepeat" value = "${user?.passwordRepeat }" /></dd>

        <dt>Account Type</dt>
        <dd>
            <g:select name="role" from="${['Teacher', 'Donor', 'Both'] }"/>
        </dd>
    </dl>



    <input type="submit" value="Register" />
</g:formRemote>

脚本是

<script type="text/javascript">
    $('#role').change(function(){
        var user = $('#role option:selected').text();

        alert(user);

        if (user == 'Teacher'){

        } else if (user == 'Donor'){

        } else {

        }

    });
</script>

使用萤火虫，我已经验证了选择列表有 id role，但该功能没有触发。事实上，它完全被忽略了，无论我做出什么选择。

为什么会这样？

4

2 回答 2

3

问题是脚本是在 DOM 加载之前执行的。因此，当您尝试绑定事件处理程序时，该元素不存在。

所以你要做的就是将完整的函数包装在文档就绪事件中，它会在加载完整的 DOM 后尝试绑定更改事件处理程序。

$(document).ready(function (){
    $('#role').change(function(){
        var user = $('#role option:selected').text();

        alert(user);

        if (user == 'Teacher'){

        } else if (user == 'Donor'){

        } else {

        }
    });
});

或者您可以简单地在页面底部添加脚本。不推荐，但仅供参考...

于 2012-04-16T21:46:23.677 回答
1

你需要做：

$("[name='role']").change(function () {

您正在使用 id 属性选择#name，使用上面的代码您正在选择具有角色名称属性的元素。

于 2012-04-16T20:35:59.140 回答