Grailsでjqueryにドロップダウンリストの値を渡します。

Question

登録フォームを改良しています。フォームを簡略化するために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を持っていることを確認しましたが、この機能は起動していません。実際には、私はどのような選択をしても、それは完全に無視されます。

どうしてですか？

Answer 1

問題は、DOMがロードされる前にスクリプトが実行されることです。したがって、イベントハンドラをバインドしようとすると、その要素は存在しません。

だから、完全なDOMをロードした後に変更イベントハンドラをバインドしようとする、ドキュメント準備完了イベント内に完全な関数をラップするだけです。

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

     alert(user); 

     if (user == 'Teacher'){ 

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

     } else { 

     } 
    }); 
}); 

それとも単にあなたのページの一番下にスクリプトを追加することができます。お勧めしませんが、FYI ...

Answer 2

あなたは実行する必要があります。

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

あなたは役割のname属性を持つ要素を選択している上記のコードを使用して、#nameを使用してIDプロパティで選択されています。