【问题标题】:Rails - getting fields to appear in form dependent on selectRails - 让字段以取决于选择的形式出现
【发布时间】:2012-10-05 13:20:26
【问题描述】:

当用户从下拉列表中选择一个选项时,我试图在表单中显示一个字段 - 即,如果他们从下拉列表中选择“其他”,则下拉列表下方会出现一个字段,显示“请指定”。我似乎根本无法让它工作——“请指定”字段始终可见。我哪里错了?谢谢!

<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>

【问题讨论】:

    标签: jquery ruby-on-rails forms select


    【解决方案1】:

    你可以这样做: http://jsfiddle.net/vooboo13/RK97r/1/

    你给不想显示css值的字段设置为display:none;

    然后您使用 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;   
    }
    

    【讨论】:

    • 我不能那样做,因为我正在使用 Ruby on Rails 进行编码,而不是纯 HTML,但我发现了问题所在 - 我查看了源代码,它有由于某种原因,给定 select 一个 pref_pref_select 的 id。所以,我将它切换到 jQuery 并且它工作了 :0) 感谢您的回答 - 至少我可以停止在 JS 中寻找丢失的分号!
    • 当然,没问题。我也在 Rails 上使用 ruby​​,但我想给你一个工作示例,所以我不得不使用纯 html/js。我想这将是可转让的。感谢您的接受:)
    【解决方案2】:

    我从未尝试过,但你听说过dependent-fields-rails gem 吗?

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-08-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多