我遵循本教程http://pullmonkey.com/2008/03/30/dynamic-select-boxes-ruby-on-rails/ 还集成了来自

这是 Controller :

class TestItController < ApplicationController 
  def index 
    @genres  = Genre.find(:all) 
    @artists = Artist.find(:all) 
    @songs   = Song.find(:all) 
  end 
 
  def update_artists 
    # updates artists and songs based on genre selected 
    genre = Genre.find(params[:genre_id]) 
    artists = genre.artists 
    songs   = genre.songs 
 
    render :update do |page| 
     page.replace_html 'artists', :partial => 'artists', :object => artists 
     page.replace_html 'songs',   :partial => 'songs',   :object => songs 
    end 
  end 
 
  def update_songs 
    # updates songs based on artist selected 
    artist = Artist.find(params[:artist_id]) 
    songs  = artist.songs 
 
    render :update do |page| 
     page.replace_html 'songs', :partial => 'songs', :object => songs 
    end 
  end 
end 

这里的模型:

class Genre < ActiveRecord::Base 
  has_many :artists 
  has_many :songs, :through => :artists 
end 
class Artist < ActiveRecord::Base 
  has_many :songs 
end 

这是 View :index.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<div id="contain" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
 
<script type="text/javascript"> 
$(function () { 
$('#contain').highcharts({ 
    chart: { 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false 
    }, 
    title: { 
        text: 'Browser market shares at a specific website, 2014' 
    }, 
    tooltip: { 
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    }, 
    plotOptions: { 
        pie: { 
            allowPointSelect: true, 
            cursor: 'pointer', 
            dataLabels: { 
                enabled: true, 
                format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
                style: { 
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
                } 
            } 
        } 
    }, 
    series: [{ 
        type: 'pie', 
        name: 'Browser share', 
        data: [ 
            ['Firefox',   45.0], 
            ['IE',       26.8], 
            { 
                name: 'Chrome', 
                y: 12.8, 
                sliced: true, 
                selected: true 
            }, 
            ['Safari',    8.5], 
            ['Opera',     6.2], 
            ['Others',   0.7] 
        ] 
    }] 
}); 
}); 
</script>     
 
 
 
<%= collection_select(nil, :genre_id,  @genres,  :id, :name, 
                  {:prompt   => "Select a Genre"}, 
                  {:onchange => "#{remote_function(:url  => {:action => "update_artists"}, 
                                                   :with => "'genre_id='+value")}"}) %> 
 
<div id="artists"><%= render :partial => 'artists', :object => @artists %></div> 
<div id="songs"><%= render :partial => 'songs',   :object => @songs %></div> 

_artists 部分 (_artists.html.erb):

<%= collection_select(nil, :artist_id, artists, :id, :name, 
                 {:prompt   => "Select an Artist"}, 
                 {:onchange => "#{remote_function(:url  => {:action => "update_songs"}, 
                                                  :with => "'artist_id='+value")}"}) %> 

_songs 部分 (_songs.html.erb):

<%= collection_select(nil, :song_id, songs, :id, :title, 
                 {:prompt   => "Select a Song"}) %> 

选择 Gnre 时出现此错误:

Uncaught ReferenceError: Ajax is not defined 
   onchange 

请有人能帮我解决这个问题:

我花了3个月，仍然没有找到答案。

似乎是 jquery.min 和组合框中的 onchange 事件之间的冲突。

请您参考如下方法:

Ajax 是在prototypejs 中定义的。您应该在使用 Ajax 的代码之前包含原型(prototype)脚本。 http://prototypejs.org/

进一步阅读here和here .