首先:确定数据库的设计,下面将省市地区数据以如下方式存入数据库的cities表(看附件):
+--------+--------------+
| id | cname |
+--------+--------------+
| 110000 | 北京市 | 第1级
| 110100 | 北京市 | 第2级
| 110101 | 东城区 | 第3级
| 110102 | 西城区 | 第3级
+--------+--------------+
那么,要取所有省(直辖市)的数据,可通过下面语句:
mysql> select * from cities where (id mod 10000 = 0 );
取某个省(直辖市)的所有市的数据,可通过下面语句:
mysql> select * from cities where (id mod 100 = 0 ) and (id div 10000 = #{province_id} div 10000 )
and (id != #{province_id});
取第三级数据:
mysql> select * from cities where(id div 100 = #{city_id} div 100 ) and (id != #{city_id});
下面开始写rails 应用:步骤如下
①、ruby script/generate scaffold city cname:string
②、写取所有省(直辖市)的数据的函数
class City < ActiveRecord::Base
def self.get_province_select_options
City.find_by_sql("select * from cities where (id mod 10000 =0 )").collect { |row| [row.cname,row.id] }.insert(0,["--请选择--",0])
end
end
③、假设这个省市地区级联应用是出现在公司(Company)的视图上,而且companies表里有相应的字段province_id、city_id、area_id。
首先在./views/layouts/companies.html.erb
添加<%= javascript_include_tag 'prototype' %> 以便定义Ajax请求,
接着就可以修改视图了Company的new/eidt视图如下:
%table
%tr
%td
=f.select(:province_id, City.get_province_select_options,{},
"onchange" => remote_function(
:with => " 'province_id = '+ value + '&partial = select_city' ",
:update =>"cityid", :complete => "Element.hide('areaid') ",
:url =>{:controller => :cities, :action => :index_city} ),
:style=>"width:150px")
%td
%div{:id=>'cityid'}
%td
%div{:id=>'areaid'}
注意:对于haml模板,上面的分行是会出错的,f.select()最好写成一行。
接着就要相应修改:controller、:action、:partial
④、修改CitiesController,主要是定义 action ——index_city
class CitiesController < ApplicationController
def index_city
if params[:province_id]
province_id = params[:province_id]
@cities = City.find_by_sql("select * from cities where (id mod 100 =0 )and (id div 10000 = #{province_id} div 10000 )
and (id != #{province_id})").collect {|c| [c.cname, c.id]}.insert(0,["--请选择--",0])
else
@cities = City.find(:all).collect {|c| [c.cname, c.id]}
end
respond_to do |format|
format.html { render :partial => params[:partial]}
format.xml { render: xml => @cities.to_xml }
end
end
end
⑤、写partial—— select_city, 在./views/cities新建一个
_select_city.html.erb,内容如下:
<%= select(:company, :city_id, @cities,{},
"onchange" => remote_function( :with => "'city_id='+value+ '&partial = select_area' ",
:update => "areaid",:complete => "Element.show('areaid')",
:url =>{:controller => :cities,:action => :index_area} ),
:style=>"width:160px")
%>
同理,要写一个action —— index_area,和一个partial ——select_area
class CitiesController < ApplicationController
def index_area
if params[:city_id]
city_id = params[:city_id]
@areas = City.find_by_sql("select * from cities where (id mod 100 =0 )
and (id div 10000 = #{city_id } div 10000 ) and
(id != #{city_id })").collect {|c| [c.cname, c.id]}.insert(0,["--请选择--",0])
else
@areas = City.find(:all).collect {|c| [c.cname, c.id]}
end
respond_to do |format|
format.html { render :partial => params[:partial]}
format.xml { render: xml => @areas.to_xml }
end
end
end
在./views/cities新建一个_select_area.html.erb,内容如下:
<%= select(:company, :area_id, @areas,{},:style=>"width:150px")%>
OK, 在Compnay的视图中使用这个三级联动菜单,已经没问题了。
分享到:
相关推荐
ajax技术实现的选择框直接导入即可运行
中国地域的三级联动:省、市、区; 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中 (2)比如取中国地域,中国是0001,那么自带号为0001的便是中国...
JSP页面,采用ajax和json技术,实现了多个下拉框之间的二级联动,也就是选择第一个下拉框的类容之后,后面的下拉框的类容动态改变
飞飞Asp乐园Asp Sql存储过程版无限级分类 开发说明: 本程序基于Asp环境开发 使用的数据库:SQLServer2000(存储过程) js框架:Jquery/ajax 数据库名称:archives <br>***能说明: 基于AJAX树状...
这个例子是实现省、市二级联动,当选择某一省时,改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面,其中省市均是从数据库取到的值: jsp页面代码: 代码如下: <&#...
本文实例讲述了Laravel框架基于ajax实现二级联动功能。分享给大家供大家参考,具体如下: 1、html页面: 过期规则: <select name=rule id=rule class=form-control style=width:20%; margin-right: 40px;>...
无刷新级联更新下联框,选择下拉框自动,客户端美观,大家可以下载看看,有帮助的
网上看到一些例子,对于一个简单的三级联动,都加上什么Struts, Hibernate诸如此类的框架。这个Ajax联动殊不知和这些框架有什么关系,一个小Demo干嘛整得那么大。 今天我做了一个dwr+jsp做的例子。 web.xml: 代码...
内容索引:脚本资源,jQuery,复选框,jQuery插件 jquery tableRow 表格与复选框配合插件,能够让表格行与复选框产生级联选择效果,具体请查看压缩包内的官方示例。
深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的私有变量 关于反射中创建类型实例的两种方法 ASP.Net应用程序的多进程模型 NET委托...
05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01 jquery属性操作之html,text,val方法 02 jquery循环方法和attr,prop方法 03 jquery...
├─(21) 05 python s3 day43 js练习之二级联动.avi ├─(22) 06 python s3 day43 jquery以及jquery对象介绍.avi ├─(23) 07 python s3 day43 jquery选择器.avi ├─(24) 08 python s3 day43 jquery的查找筛选器....