Rails下拉列表，选择一个字段如何触发另一个字段出现

问题描述

所以我有一个要在Ruby on Rails中创建的表单，一旦选择了第一个下拉菜单，便要使它显示出来。

这是家庭作业的要求：“显示一个列出所有客户（表客户）的下拉选择器，一次只能选择一个客户。选择完成后，更改将触发建筑物的操作。表单的选择字段-下一步2“

这是我的views / intervention / intervention.html.erb的代码：

    <div class="col-md-6 mx-auto text-center offset-md-3 ">
        <%= collection_select(:intervention,:customer_id,Customer.order(:full_name_company_contact),:id,:full_name_company_contact,{prompt: 'Select a customer'}) %>
    </div><br><br>

    <div class="col-md-6 mx-auto text-center text-blue offset-md-3">
        <%= collection_select(:intervention,:building_id,Building.order(:id),{prompt: 'Select a building'}) %> 
    </div><br><br>

    <div class="col-md-6 mx-auto text-center text-blue offset-md-3">
        <%= collection_select(:intervention,:battery_id,Battery.order(:building_id),{prompt: 'Select a battery'}) %> 
    </div><br><br>
    
    <div class="col-md-6 mx-auto text-center text-blue offset-md-3">
        <%= collection_select(:intervention,:column_id,Column.order(:battery_id),{prompt: 'Select a column'})  %>
    </div><br><br>

    <div class="col-md-6 mx-auto text-center text-blue offset-md-3">
        <%= collection_select(:intervention,:elevator_id,Elevator.order(:column_id),{prompt: 'Select an elevator'}) %>
    </div><br><br>
    
    <div class="col-md-12 mx-auto text-center text-blue offset-md-3">
        <%= collection_select(:intervention,:employee_id,Employee.order(:first_name),:first_name,{prompt: 'Select an employee'}) %>
    </div><br><br>

    <div class="col-md-12">
        Description
            <textarea maxlength="1000" rows="8" class="form-control" name="intervention[description]" id="intervention:message"></textarea>
    </div>

    <div class="col-6">
        <div class="actions">
            <button class="btn-primary btn-lg mt-12" id="submitBtn"> Submit </button>
        </div>
    </div>


</fieldset>`

解决方法

您需要使用javascript来显示/隐藏下拉菜单

$(document).ready(function () {
     $('#customer_id').on(change,function(){
           $('#building_id').show();
       });
        
    });