Question

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

网站的用户可以是Teachers，Donors或两者。 Teachers包含Donors不需要的字段，反之亦然。因此，我不是通过询问他们的教学年级来填充所有领域的表单并使国际用户感到困惑，而是实施了一个下拉列表，以便用户可以选择他们的角色，并通过{{{{{{ 1}}方法。

这是我迄今为止建立的形式：

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>

使用firebug，我已验证选择列表的标识为<script type="text/javascript"> $('#role').change(function(){ var user = $('#role option:selected').text(); alert(user); if (user == 'Teacher'){ } else if (user == 'Donor'){ } else { } }); </script>，但该功能未启动。事实上，无论我做出什么选择，它都完全被忽略了。

为什么会这样？

Answer 1

问题是脚本在DOM加载之前执行。因此，当您尝试绑定eventhandler时，该元素不存在。

所以你需要做的是将complete函数包装在document ready事件中，该事件将在加载完整的DOM之后尝试绑定change事件处理程序。

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

        alert(user);

        if (user == 'Teacher'){

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

        } else {

        }
    });
});

或者您只需在页面底部添加脚本即可。这不是推荐，但仅供参考......

Answer 2

你需要这样做：

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

您正在使用#name选择ID属性，使用上面的代码选择name属性为role的元素。

将下拉列表值传递给Grails中的jquery

2 个答案: