Rails 简单的表单输入显示/隐藏

Posted 2023-05-08

【中文标题】Rails 简单的表单输入显示/隐藏

【英文标题】：Rails simple form input show/hide

【发布时间】：2020-06-14 21:55:00

【问题描述】：

我使用ancestry gem 来创建类别和子类别（父、子、兄弟）。然后我在一个简单的表单中有一个选择输入：

<div class="form-group">
  <%= f.input :parent_category_id, collection: @categories, label: "Category", as: :grouped_select, group_method: :children, include_blank: true, input_html:  id: 'first-dropdown'  %>
</div>

我用父类别填充上述输入：

@categories = Category.where(ancestry: nil)

当我在上面的输入中选择一个类别时，子类别会出现在下面的输入中。如果类别没有子类别，则输入为空。

<div class="form-group">
  <%= f.input :category_id, label: "Subcategories", :collection => [], :label_method => :name, :value_method => :id, required: true, input_html:  multiple: true, id: 'second-dropdown'  %>
</div>

$('#first-dropdown').on('change', function() 
    $.ajax(
        url: 'categories/select_item?category_id=' + $(this).val(),
        dataType: 'json',
        success: function(data) 
            let childElement = $('#second-dropdown');
            childElement.html('');
            data.forEach(function(v) 
                let id = v.id;
                let name = v.name;
                childElement.append('<option value="' + id + '">' + name + '</option>');
            );
        
    );
);

这个设置一切正常。但现在我想添加一个我不知道如何添加的功能。我希望最初隐藏第二个输入。如果子类别存在，我想显示第二个输入，如果子类别不存在，我想隐藏第二个输入。任何想法如何实现这一点？

【参考方案1】：

这可以工作...

    success: function(data) 
        let childElement = $('#second-dropdown');             
        childElement.toggle(Array.isArray(data) && data.length > 0)
        ...

【讨论】：

感谢@Andre Figueiredo 的回复。您提供的代码会根据是否存在子类别隐藏并显示输入。但是它会弄乱子类别，它会从选定的类别中添加新的类别，并保留旧的类别。我还希望最初隐藏输入字段，当我选择一个包含子类别的类别时。

我知道你的代码怎么样，但你可以用class: hidden初始化second-dropdown，并用append替换子元素，但这很奇怪，因为你已经用.html('')清理它了。 .