0

ユーザーがドロップダウンから「その他」を選択すると、「その他-指定してください」というフィールドが下に表示されるフォームがあります。ただし、それは完全には機能していません。「指定してください」フィールドにdisplay：noneを設定した場合、フォームが保存され、ユーザーが戻って編集すると、「指定してください」フィールドではなく、選択ボックスだけが表示されます。

これが発生している理由はわかっています。これは、showイベントが発生する前に、jQueryがユーザーによる選択ボックスの変更を待機しているためです。

ただし、CSSからdisplay：noneを削除すると、ユーザーが最初にフォームを表示したときに、選択ボックスに何が表示されているかに関係なく、選択ボックスと[指定してください]フィールドが表示されます。これを修正するにはどうすればよいですか？ページの読み込み時にコードの「if」ブロックを実行することもできますが、これを行う方法がわかりませんか？ありがとう！！

<script>
$(function(){
    $("#pref_select").change(function(){
        if ($("#pref_select").val()=="Other"){
            $("#other-pref").show(500);
        } else {
            $("#other-pref").hide();
        }
    })
})
</script>

<div class="field">
  <%= f.label :pref %><br />
  <%= f.select :pref, ["", "1", "2", "Other"], {:id => "pref_select"} %>
</div>

<div class="field" id="other-pref">
  <%= f.label "Other - please specify" %><br />
  <%= f.text_area :other_pref %>
</div>
4

1 に答える 1

0

ページの読み込み時にチェックをトリガーする場合は、変更イベントをトリガーします。変更イベントをバインドしましたが、チェックはトリガーされた後にのみ発生します。したがって、目的の効果を得るには、ページの読み込み時に change() をトリガーする必要があります

$("#pref_select").change(function() {
    if ($("#pref_select").val() == "Other") {
        $("#other-pref").show(500);
    } else {
        $("#other-pref").hide();
    }
}).change()​ // <-- this triggers the change event
于 2012-10-05T14:22:02.437 に答える