Rails级联下拉列表：根据选择的上一个下拉选项，将下拉菜单更改为文本字段

Question

在我的Rails应用程序中，我有一个使用country_select gem的“国家/地区选择选项”下拉列表，在“国家/地区”选择下拉列表旁边还有另一个下拉列表，以“ US”状态显示以下代码：

国家代码选择下拉

<div class="row">
    <div class="form-group">
      <%= f.label :country,'Country', class:"control-label"%>
      <%= f.country_select(:country ,  {priority_countries: [ "US"]} ,{class: "form-control"}) %>
    </div>
</div>

状态码选择下拉

      <%= f.label :state,'State', class:"control-label" , style: "color: black;"%>
      <%= f.select( :state, options_for_select(us_states), {}, {class: "form-control"}) %>

在这里， us_states方法是在application_helper.rb文件中定义的，如下所示：

def us_states
    [
        ['Alabama', 'AL'],
        ['Alaska', 'AK'],
        ['Arizona', 'AZ'],
     ...............etc
    ]

  end

在这里，默认选择的国家/地区是“美国”，但是如果用户从国家/地区选择下拉列表中选择任何其他国家/地区，则我希望将状态选择下拉到普通文本字段中，而不是下拉列表中 。 如果用户选择美国以外的国家/地区，如何使状态选择下拉到文本字段中？ 如果选择的国家是美国，那么州部分必须保留为下拉菜单？

Answer 1

我建议先添加“文本字段”和“州”下拉列表，然后根据“国家/地区”值切换它们。

<%= f.label :state,'State', class:"control-label" , style: "color: black;"%>
<%= f.select( :state, options_for_select(us_states), {}, {class: "form-control"}) %>
<%= f.text_field :state,'', class: "form-control",:style=>"display:none"%>

现在在jQuery中添加切换逻辑

<script type='text/javascript'>
    $("#country_drop_down_id").change(function(){
    if($(this).val()=='US'){
       $('#state_drop_down_id').show();
       $('#state_text_field_id').hide();
    }else{
       $('#state_drop_down_id').hide();
       $('#state_text_field_id').show();
    }
    });
 </script>

用相应的ID选择器替换country_drop_down_id , state_drop_down_id , state_text_field_id 。