Rails простая форма ввода / вывода

Question

Я использую 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>');
            });
        }
    });
});

С этой настройкой все работает нормально. Но теперь я хотел бы добавить функцию, которую я не знаю, как. Я хочу, чтобы второй вход был изначально скрыт. И я хочу показать второй вход, если подкатегории существуют, и скрыть второй вход, если подкатегории не существуют. Есть идеи, как это реализовать?

Answer 1

это может сработать ...

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