Rials实现下拉框联动的两种实现方式

Java代码  


一：partial模版替换  

  

$(document).on('change','.change_city',function(){  

      var $this = $(this),  

         district_name = $this.find('.text').text();   

      if (district_name != "") {  

      $.ajax({  

          url: "/inquiry/inquiries/change_city",  

          type: "get",  

          data: {  

            district_name: district_name  

          },  

          success: function(data){  

            $this.parents('.fields').find('.city').html(data);  

            $(document).find('.ui.dropdown').dropdown();  

          }  

        });  

      }  

    });  

  

def change_city  

    @cities = City.ind_cities(params[:district_name])||[]  

    render :partial => "change_city"   

end  

  

<%= select_tag "contact[inquiries][city]", options_for_select(@cities), include_blank: "City", class: "ui compact dropdown" %>  

  

  下载点击

二：选择内容替换  

  

<%= f.select :province, options_for_select(City.ind_districts, company.province), include_blank: 'Select State' %>  

<%= f.select :city, options_for_select({company.city => company.city}.compact || [], company.city), include_blank: 'Select City' %>  

  

  

$("#state").change(function(){  

    $.ajax({  

      type: "get",  

      url: '<%= get_cities_path %>',  

      dataType: "json",  

      data: {state: $('#state').val()},  

      success: function(data){  

        $("#city").html('<option value="">City </option>');  

        $("#city").append(data.options);  

        var select_comboSelect = $(document).find('select');  

        if (select_comboSelect.length && select_comboSelect.length > 0) {  

          select_comboSelect.comboSelect();  

        }  

      }  

    });  

  });  

  

def city  

    options = City.ind_cities(params[:q].to_s.strip).inject(""){|options_str, c| options_str += "<option value='#{c[0]}'>#{c[1]}</option>"}  

    render json: {options: options}  

end