`

AJAX级联下拉菜单 related drop-down lists

阅读更多
      在问答里看到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]}) %> 


分享到:
评论

相关推荐

    JavaDB+JSP+AJAX级联下拉菜单

    JavaDB+JSP+AJAX实现的级联下拉菜单.htm

    Ajax级联下拉列表.rar

    在本示例中,"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据...

    Ajax级联下拉列表

    使用Ajax来实现下拉列表的级联显示,通俗易懂,思路清晰,适合刚刚接触Ajax的开发者来理解Ajax

    java web下开发二级级联下拉菜单(数据库实现的)

    在Java Web开发中,二级级联下拉菜单是一种常见的用户界面元素,用于提供层次结构的选择。这个场景中,我们利用数据库存储数据,并通过后端处理逻辑动态生成这些下拉菜单。下面将详细介绍如何使用MySQL数据库来实现...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    JQuery写的日期级联下拉菜单

    **jQuery编写的日期级联下拉菜单** 在Web开发中,日期选择是一个常见的需求,而级联下拉菜单则是实现这一功能的一种优雅方式。这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户...

    级联下拉菜单

    在级联下拉菜单中,jQuery将帮助我们监听用户在第一个下拉菜单中的选择,并基于此触发Ajax请求获取关联数据。 接着,我们来看看ASP.NET的一般处理程序(.ashx)。这是一种HTTP处理模块,它可以像ASPX页面一样处理...

    javascript四级级联下拉菜单

    JavaScript四级级联下拉菜单是一种常见的网页交互设计,它允许用户在多个下拉菜单中进行选择,逐级筛选出最终的选项。这种设计通常用于表示层次结构的数据,如国家、省份、城市和区域等地理信息,也可以应用于其他...

    《使用面向对象的方式封装js级联下拉菜单列表的实例教程》源码

    本文件属于文章《使用面向对象的方式封装js级联下拉菜单列表的实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中cascadeMenu.js文件封装了级联菜单插件,可直接引入到html文件中使用。

    ajax实现级联下拉列表代码

    在网页开发中,级联下拉列表是一种常见的交互设计,它允许用户在选择一个选项后,根据该选项的值动态加载下一个下拉列表的内容。这种功能通常用于展示层级关系的数据,如国家-省份-城市这样的地理信息。在本示例中,...

    JSP+JavaScript二级级联下拉菜单

    在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。

    AJAX3级级联下拉例子

    这个"AJAX3级级联下拉例子"是一个典型的前端交互应用,常见于动态填写表单,如地区选择,省市区级联填充。在这个例子中,用户选择一个选项时,下一个下拉框会根据前一个选项的值动态加载相关的数据,从而提供更精确...

    JavaDB+JSP+AJAX实现的级联下拉菜单 .rar

    本项目中,"JavaDB+JSP+AJAX实现的级联下拉菜单"是一个经典的应用场景,用于提升用户界面的用户体验,特别是在数据关联和筛选时。 **JavaDB** 是一个轻量级的关系型数据库管理系统,它基于开源的Derby数据库。Java...

    PHPRPC 实现 Ajax 级联下拉菜单

    在网上看到的;希望可以让大家喜欢 【摘 要】 就是采用 Ajax 方式,即开始只载入第一层菜单的内容,当用户选中第一层菜单的某项时,再通过 XmlHttpRequest 来获取相应选项所对应的第二层菜单的内容。

    Ajax级联下拉

    Ajax级联下拉是一种常见的前端交互技术,常用于构建动态的、交互性强的网页应用,如地址选择器或分类过滤等。在这个项目中,我们主要关注的是如何利用Ajax实现中国省份与城市之间的级联下拉效果,同时结合MySQL...

    Ajax 实现级联菜单

    在本项目中,Ajax被用来实现级联菜单的效果,即一个下拉菜单的选择会影响另一个下拉菜单的内容,这种交互方式常见于数据层级关系丰富的表单中。下面将详细介绍Ajax实现级联菜单的相关知识点。 1. **异步通信**: ...

    Ajax实现的三级联动下拉菜单

    struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp

    ajax实现下拉列表级联

    在本文中,我们将深入探讨如何使用Ajax技术来实现下拉列表的级联效果,这是一个常见的交互功能,特别是在数据录入和筛选场景中。我们将基于EJB(Enterprise JavaBeans)技术连接数据库,以动态加载和更新下拉列表...

    jsp+json+mySql 实现二级级联下拉菜单

    在本文中,我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中,让用户能够从相关联的分类中选择选项,例如省份与城市的选择。 首先,让我们了解这三个技术的核心...

    select2 省市区 级联 下拉菜单

    6. **禁用未激活的下拉**:为了防止用户在级联完成前做出无效选择,可以将未激活的下拉菜单设为禁用状态。当某个选择发生时,才启用相应的下拉菜单。 通过以上步骤,你可以成功实现一个基于select2的全国省市区三级...

Global site tag (gtag.js) - Google Analytics