选择“其他”时下拉添加输入答案

【问题标题】：Drop down to add input when "Other" is selected选择“其他”时下拉添加输入
【发布时间】：2012-07-03 17:01:32
【问题描述】：

我的表单中有一个下拉菜单，需要在选择“其他”时呈现新的文本输入。我试图用以下方法做到这一点无济于事：

Rails 视图

  <div class ="testinputs"
      <li><%= o.input :name, :as => :select, :collection => [:Anniversary, :Birthday, :Graduation, :Holiday, :'Mothers day', :'Fathers day', :'Valentines day', :Wedding, :other ]%></li>
       <%= o.input :name, :as => :hidden %>
  </div>

jquery

$(function() {
    $("#testinputs").change(function() {
        var val = $(this).val();
        if(val == 'other') {
            $('input[name="occasion[name]"]').show();
        } else {
            $('input[name="occasion[name]"]').hide();
        }
    }).change();
});

我的表单呈现的 HTML：

<div class="testinputs" <li=""><div class="control-group select required"><label class="select required control-label" for="occasion_name"><abbr title="required">*</abbr> Name</label><div class="controls"><select class="select required" id="occasion_name" name="occasion[name]"><option value=""></option>
    <option value="Valentines day">Valentines day</option>
    <option value="Wedding">Wedding</option>
    <option value="other">other</option></select></div></div>
        <div class="control-group hidden"><div class="controls"><input class="hidden" id="occasion_name" name="occasion[name]" type="hidden"></div></div>
      </div>

【问题讨论】：

带有 type="hidden" 的输入字段将始终保持隐藏状态。创建一个普通文本字段并使用 display : block or none; 或 visibility:hidden 等属性

标签： javascript jquery ruby-on-rails ruby-on-rails-3.1 simple-form

【解决方案1】：

我相信您将输入呈现为 type="hidden" 这意味着即使您通过 JS 显示它也不会显示。

使用普通文本输入，通过 css/js 将其隐藏，然后显示。

【讨论】：