Блог

У меня есть форма, которая позволяет пользователю выбрать страну. В зависимости от того, какая страна выбрана, мне нужно изменить раскрывающийся список штата / провинции, чтобы включить в него либо список штатов, либо список провинций. Я собирался сделать это, используя observe_field тег, но он был устаревшим в rails 3…

Итак .., как следует поступить с этим сейчас? Я использую select_tag для заполнения выпадающих списков, и все массивы, используемые в options_for_select , хранятся на стороне сервера и становятся доступными в действии контроллера, поэтому я не могу получить к ним доступ из javascript..

Использование драгоценного камня Carmen:https://github.com/jim/carmen.

Я сделал следующее несколько раз назад (AJAX).

HTML:

     <p>
        <label>Country <span>*</span></label>
        <%= profile_form.select(:country,Carmen.countries, {:include_blank => 'Select a Country'}, :id => "profile_country") %>
    </p>
    <p>
        <label>State <span>*</span></label>
        <%= profile_form.select(:state,  "" , {:include_blank => 'Select a Country first'}, :id => "profile_state") %>
    </p>
  

Контроллер:

 def states
  begin
    render :json => Carmen::states(CGI::unescape(params[:country]))
  rescue 
    render :json => {"content" => "None"}.to_json
  end
end 
  

Javascript с jQuery:

 $('#profile_country').change(function() {
    if ($(this).val() == '')
    {
      $('#profile_state').empty();
      $('#profile_state').append( $('<option>No state provided for your country</option>'));
    }
    else {
        $.ajax({
            type: "GET",
            url: "/remote/get_states/"   encodeURIComponent($(this).attr('value')),
            success: function(data){
                if (data.content == 'None')
                {
                    $('#profile_state').empty();
                  $('#profile_state').append( $('<option>No state provided for your country</option>'));
                }
                //handle the case where no state related to country selected
              else
             {
                $('#profile_state').empty();
                $('#profile_state').append( $('<option>Select your State</option>'));
                jQuery.each(data,function(i, v) {
                 $('#profile_state').append( $('<option value="'  data[i][1]  '">' data[i][0]  '</option>'));
            });
        }
        }
      });
    }
 });