0

ユーザーがドロップダウンからオプションを選択したときのフォームにフィールドを表示しようとしています。つまり、ドロップダウンから[その他]を選択すると、ドロップダウンの下に[指定してください]というフィールドが表示されます。まったく機能しないようです。[指定してください]フィールドが常に表示されます。どこが間違っているのですか？ありがとう！

<script>
$(function(){
    $("#pref-select").change(function(){
        if ($("#pref-select").val()=="Other"){
            $("#other-pref").show();
        } 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_preference %><br />
  <%= f.text_area :other_pref %>
</div>
4

2 に答える 2

8

あなたはこのようにそれをすることができます：http： //jsfiddle.net/vooboo13/RK97r/1/

display：none;のcss値を表示したくないフィールドを指定します。

次に、jQueryを使用して特定の値を監視し、その値である場合はそれを表示します。

HTML：

「フィアット」を選択して、魔法が起こるのを見てください

<form action="" id="cars">
    <select name="cars" id="car_selector">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <p>&nbsp;</p>
    <label class="hidden_option">Why would you DO that?</label>
    <input type="text" name="reason" class="hidden_option" />
</form>

JS：

$(document).ready(function(){
    $("#car_selector").change(function(){
        if($("#car_selector").val() == "fiat"){
          $(".hidden_option").fadeIn('fast');   
        }            
    });        
});

CSS：

.hidden_option{
 display: none;   
}
于 2012-10-05T13:35:55.957 に答える
1

私は試したことはありませんが、dependent-fields-rails gemについて聞いたことがありますか？

于 2013-11-27T15:15:23.197 に答える