rails完美实现中国省市区三级联动

　　　完美实现中国省市区ajax三级联动．

　　　一，下载MYSQL的数据库表 ，分别有三个province city area,

　　　二，在helpers当中加入一个方法，取出全国省：

def get_area_select_options
      Province.find(:all,:order=>'province').collect{|item|[item.province,item.provinceid]}.insert(0,["请选择..",nil])     
    end

         三,在views当中，比如new的form当中需要加入如下语句：

<p><label for="friend_level2_provice_id">所在城市</label><br/>
  <%= select("friend_level2", "provice_id", get_area_select_options, {}, { "onchange" => remote_function(   
        :with => "'parent_id='+value",
        :update => 'next_select',
        :complete => "Element.hide('county_select')",
        :url => { :action => :select_with_ajax } ) })%>
  <span id='next_select'>         
  </span>  
  <span id='county_select'> </span> 
  <br/>
</p>

 　　四，分别在对应的controllers当中加入如下语句：

def select_with_ajax       
    @citys = [["请选择",""]]+City.find(:all, :conditions => ["fatherid = ?", params[:parent_id]]).collect { |item| [item.city, item.cityid] }           
    render(:layout => false)        
  end
  def select_with_ajax1       
    @areas = Area.find(:all, :conditions => ["fatherid = ?", params[:parent_id]]).collect { |item| [item.area, item.areaid] }      
    render(:layout => false)   
  end

 　　五，在views创建两个rhtml分别是：select_with_ajax，代码如下：

<%= select("friend_level2", "city_id", @citys, {}, { "onchange" => remote_function(   
        :with => "'parent_id='+value",
        :update => 'county_select',
        :complete => "Element.show('county_select')",
        :url => { :action => :select_with_ajax1 } ) })%>

 　　　另外一个是select_with_ajax1，代码如下：

<%= select("friend_level2", "area_id", @areas) %> 

 　　六，我目的表结构是:

 

CREATE TABLE `friend_level2s` (
  `id` int(10) unsigned NOT NULL auto_increment,  
  `provice_id` int(11) default NULL,
  `city_id` int(11) default NULL,
  `area_id` int(11) default NULL,
  PRIMARY KEY  (`id`)  
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

      另外，如果有乱码请在application.rb当中加入如下语句：

 before_filter :configure_charsets
  def configure_charsets
    @response.headers["Content-Type"] = "text/html; charset=utf-8"
    # Set connection charset. MySQL 4.0 doesn’t support this so it
    # will throw an error, MySQL 4.1 needs this
    suppress(ActiveRecord::StatementInvalid) do
      ActiveRecord::Base.connection.execute 'SET NAMES UTF8'
    end 
  end 

 　使用说明，完美实现了动态查询中国省市区的联动！呵呵，好好学习．

评论

9 楼 hexawing 2008-12-15  

唉，调了半天也弄不出来，报错说“Ajax未定义”，这个要怎么定义啊？就是在view里搞一个“<%= javascript_include_tag :defaults %>”就行了吧？
(因为之前照敏捷开发上的例子做的时候也报过这个，于是找出来，把这句删掉，果然报未定义。但现在我加上这一句也没用的说……)

8 楼 jckdoo 2008-09-25  

谢谢正好用上

7 楼 为什么需要注册 2008-09-04  

fhit 写道

我觉得可以将全部省份以常量的形式存在html文件中，然后在省变化的时候，将所有省相关的内容下载到浏览器。这样只需要一个查询就可以了。

这样的话，性能会好很多。尤其是省份这种不经常变化的值。

6 楼 fhit 2008-09-04  

我觉得可以将全部省份以常量的形式存在html文件中，然后在省变化的时候，将所有省相关的内容下载到浏览器。这样只需要一个查询就可以了。

比如： http://www.m3958.com

中的解决方案。由于采用了yui，所以浏览器的适应性很好，包括我的手机上的nokia内置的浏览器都可以正常工作。

5 楼 ray_linn 2008-09-01  

比我用struts写的代码多多了，三级连动后台根本没什么技巧，ajax代码才是关键。

4 楼 godfox 2008-08-31  

试用了一下，还不错的，创建一条新的记录的时候还可以，比如用户注册的时候，用户很方便的选择所在省市区，但，当用户成为会员后，如果想要修改所在省市区的时候，不知道各位如何处理的

3 楼 viva_yang 2008-07-15  

not bad

2 楼 superxielei 2008-07-13  

sun201200204 写道

建议把onchange改成onclick

我还是感觉onchange比较好.当用键盘调整位置的时候,onclick就失效了.会出现BUG!

1 楼 sun201200204 2008-07-12  

建议把onchange改成onclick