Home>

After selecting the area with the code below,
I want to make the second-stage form suitable for the region.
If i select Kanto in the first form, select Kanto selection form,
I want to bring up the Chubu selection form when I select Chubu.

With the jquery code below,
hide works, but
Even if you select by area selection, fadeIn of the corresponding form does not occur.

How can I achieve a two-step select?


  <%= f.label :area %><br />
  <%= f.select :area, [
      ['Kanto'],['Chubu']
    ],
      {include_blank:'Please select a region'},
      id: "area"
       %>
  
  
  <%= f.select :prefecture,[
      # Kanto
      ['Tokyo'],['Chiba'],['Kanagawa'],['Saitama'],['Tochigi'],['Gunma'],['Ibaraki']
    ],
      {include_blank:'Please select a province'},
      id: "prefecture-kanto"
       %>
  
  
  <%= f.select :prefecture,[
      #Chubu
      ['Niigata'],['Toyama'],['Ishikawa'],['Fukui'],['Nagano'],['Gifu'],['Yamanashi'],['Shizuoka'],[' Aichi']
    ],
      {include_blank:'Please select a province'},
      id: "prefecture-tyubu"
       %>
$(document).on('turbolinks:load', function() {
  // New registration page
  //Display the prefecture selection after selecting the area
  $('#prefecture-kanto').hide();
  $('#prefecture-tyubu').hide();
    var cat = $('#area').val();
    if(cat =='Kanto'){
      $('#prefecture-kanto').fadeIn();
    }
    if(cat =='Chubu'){
      $('#prefecture-tyubu').fadeIn();
    }
});
  • Answer # 1

    I was able to solve it with the following code.
    Thank you very much.

    
      <%= f.label :area %><br />
      <%= f.select :area, [
          ['Private'],['Kanto'],['Chubu'],['Kinki'],['China'],['Shikoku'],['Kyushu'],['Tohoku'],[ 'Hokkaido']
        ],
          {include_blank:'Please select a region'},
          id: "area"
           %>
      
      
      <%= f.select :prefecture,[
          # Kanto
          ['Tokyo'],['Chiba'],['Kanagawa'],['Saitama'],['Tochigi'],['Gunma'],['Ibaraki']
        ],
          {include_blank:'Please select a province'}
           %>
      
      
      <%= f.select :prefecture,[
          #Chubu
          ['Niigata'],['Toyama'],['Ishikawa'],['Fukui'],['Nagano'],['Gifu'],['Yamanashi'],['Shizuoka'],[' Aichi']
        ],
          {include_blank:'Please select a province'}
           %>
    
    //It works by first loading, reloading, and switching pages.
    $(document).on('turbolinks:load', function() {
      // New registration page
      //Display the prefecture selection after selecting the area
      $('#prefecture-kanto').hide();
      $('#prefecture-tyubu').hide();
    });
    // New registration page
    //Display the prefecture selection after selecting the area
    $(document).on('change','#area', function() {
      var cat = $('#area').val();
      if(cat =='Kanto'){
        $('#prefecture-kanto').fadeIn();
      }
      if(cat =='Chubu'){
        $('#prefecture-tyubu').fadeIn();
      }
    });