0

我有一个表格，如果用户从下拉列表中选择“其他”，下面会出现一个字段，上面写着“其他 - 请指定”。但是，它并不完全有效。如果我为“请指定”字段设置 display:none，那么当保存表单并且用户返回编辑它时，他们看到的只是选择框，而不是“请指定”字段。

我知道为什么会发生这种情况 - 这是因为 jQuery 正在等待用户在 show 事件触发之前更改选择框。

但是，如果我从 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 回答