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

最新推荐文章于 2025-08-09 16:13:36 发布

jamst8522127

最新推荐文章于 2025-08-09 16:13:36 发布

阅读量175

点赞数

分类专栏： RUBY js 文章标签： json ui

RUBY 同时被 2 个专栏收录

171 篇文章

订阅专栏

31 篇文章

订阅专栏

本文介绍了一种基于Ajax的城市选择器实现方案，通过监听城市选择的变化并动态更新相关选项，实现了良好的用户体验。该方案使用了jQuery进行DOM操作，并通过GET请求从服务器获取新的城市列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


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