Rails 级联下拉列表:根据选定的上一个下拉选项将下拉菜单更改为文本字段 [英] Rails Cascading Drop Down List: Change Drop down menu into Text Field based on Previous Drop Down Option Selected

问题描述

在我的 Rails 应用程序中，我有一个使用 country_select gem 的国家/地区选择选项下拉列表，在国家/地区选择下拉列表旁边有另一个下拉列表，用于显示美国"中的州，例如代码如下:

国家/地区代码选择下拉

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

州代码选择下拉

 <%= 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[['阿拉巴马'，'AL']，['阿拉斯加', 'AK'],['亚利桑那'，'AZ']，...............等等]结尾

这里默认选择的国家是美国"，但是如果用户从国家选择下拉列表中选择任何其他国家，那么我想让状态选择下拉到一个普通的文本字段而不是一个下拉列表.如果用户选择美国以外的国家/地区，如何将状态选择下拉到文本字段中?如果所选国家/地区是美国，则州部分必须保留为下拉列表?

解决方案

我建议最初添加 Text Field 和 State 下拉列表，并根据 Country 值切换它们.

<%= 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 中添加切换逻辑

更换country_drop_down_id , state_drop_down_id , state_text_field_id带有相应的 ID 选择器.

In my Rails Application I have a Country Select Option Drop down list using the country_select gem,and next to the country select drop down there is another dropdown to display the states in "US" like the code bellow:

CODE OF COUNTRY SELECT DROP DOWN

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

CODE OF STATE SELECT DROP DOWN

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

Here us_states method is defined in application_helper.rb file like bellow:

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

  end

Here the default selected country is "US", but if the user select any other country from the country select drop down then I want make the state select drop down into a normal text field not a drop down list. How can I make the state select drop down into a text field if the user select a country other than US ? And if the selected country is US the state section must stay as a drop down ?

解决方案

I would recommend to add both Text Field and State dropdown initially and toggle them depending on Country value.

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

Now add toggle logic in 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>

Replace country_drop_down_id , state_drop_down_id , state_text_field_id with corresponding ID selector.

这篇关于Rails 级联下拉列表:根据选定的上一个下拉选项将下拉菜单更改为文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！