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

Question

在我的 Rails 应用程序中，我有一个国家 Select 选项下拉列表，使用 country_select gem，并且在国家 select 下拉菜单旁边还有另一个下拉菜单显示 "US" 中的州，如以下代码：

国家/地区代码 SELECT 下拉列表

<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>

州代码SELECT下拉

      <%= 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

此处默认 selected 国家是 "US"，但是 如果用户 select 来自国家 select 的任何其他国家下拉则我想让状态 select 下拉到普通文本字段而不是下拉列表 。如果用户 select 是美国以外的国家/地区，我如何使状态 select 下拉到文本字段中？如果 selected 国家是美国，州部分必须保留为下拉列表？

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>

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

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

Rails Cascading Drop Down List: Change Drop down menu into Text Field based on Previous Drop Down Option Selected

ruby-on-rails

ruby-on-rails-3

ruby-on-rails-3.2

ruby-on-rails-4