在问答里看到xu_ch问一个问题,关于下拉列表的。想起,之前做过一个关于用AJAX,级联动态更新下拉菜单的类似功能。借这个机会整理出来以便有点用处。
最初的一篇据说经典,我想翻译一下:
http://www.roryhansen.ca/2005/06/21/related-drop-down-lists-with-ruby-and-ajax/
一些抱怨
However, this code actually creates HTML in the controller component:
@albums = Album.find_all_by_artist_id(@params["artist_id"])
@html = ""
@html += "No Album"
@albums.each do |@album|
@html += "#{@album.album_name}"
end
@html += ""
I would think this is considered 'bad practice', because this is the job of
the view.
How could one rewrite this and get a cleaner controller code?
<select name="yes_or_no" id="yes_or_no" >
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<%= observe_field 'yes_or_no',
:frequency => 1,
:update => 'div_to_be_updated',
:url => {:controller => 'controller', :action=> 'action' },
:with => "'is_delivery_address=' + escape(value)" %>
#in your controller
def action
if params[:is_delivery_address] == "1"
render :partial => 'nothing'
else
render :partial => 'address_partial'
end
end
# _form.rhtml
<%= options_from_collection_for_select(Coordinator.find_all, "id",
"coordinator_name") %>
#get_projects
def get_projects
@results = Project.find_all
render :partial => 'options'
end
# _options.rhtml
<% for project in @results do -%>
<%=project.project_number%>
<% end -%>
controller里边:
def test
@provinces = Province.find(:all)
end
def select_with_ajax
@cities = City.find(params[:province_id])
render :partial => "select_city"
end
test.rhtml的代码:
<%= javascript_include_tag :defaults %>
<%= select(:province, :id, @provinces.map {|u| [u.name, u.id]},options = {},
html_options = {"onchange" => remote_function(
:with=> "'province_id='+value", :update => 'city_select',
:url => { :action => :select_with_ajax })})
%>
_select_city.rhtml的代码:
<%= select(:city, :id, @cities.map{|u| [u.name,u.id]}) %>
分享到:
相关推荐
很有用的javascript四级级联下拉菜单,国家-省级-市级-街道地区,可以扩展为无限级联,样式可以自行设计。
JavaDB+JSP+AJAX实现的级联下拉菜单.htm
使用Ajax来实现下拉列表的级联显示,通俗易懂,思路清晰,适合刚刚接触Ajax的开发者来理解Ajax
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人
java技术实现的ajax下拉列表级联选择小功能
本文件属于文章《使用面向对象的方式封装js级联下拉菜单列表的实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中cascadeMenu.js文件封装了级联菜单插件,可直接引入到html文件中使用。
在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。
在网上看到的;希望可以让大家喜欢 【摘 要】 就是采用 Ajax 方式,即开始只载入第一层菜单的内容,当用户选中第一层菜单的某项时,再通过 XmlHttpRequest 来获取相应选项所对应的第二层菜单的内容。
网上级联菜单确有不少,单大多是直接写死到jsp页面中的,本代码是用mysql的数据库实现的,希望对大家有帮助!!!
利用Jquery实现级联下拉菜单效,其中运用到的知识有ASP.NET一般处理程序;Ajax,Json
struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip
Ajax中国省份市二级级联下拉+mysql数据脚本+MVC模式源代码
利用ejb连接数据库,成功的实现ajax下拉列表级联,下拉列表中的数据从数据库中调用。
JQuery写的日期级联下拉菜单 :可以直接运行,不需要部署iis 以便大家可以直接使用
刚学AJAX 做了个例子 核心代码 供初学者参考
JavaDB+JSP+AJAX实现的级联下拉菜单
其中例子包括(2,3,4,5,6级联)对想学习ajax实现级联的来说是很有用。思路清晰。
Ajax-级联菜单 Ajax-级联菜单
级联下拉菜单jQuery插件,它允许您根据先前的选择来填充一组表单下拉菜单。演示版基本用法要使用该插件而不覆盖任何默认设置,您需要使用多个下拉(选择)菜单创建表单的结构。 在以下示例中,我正在使用<form>...