javascript - 动态选择菜单栏4

我正在尝试使用此guide创建动态选择菜单；但是，它似乎并没有改变select select语句。

这是我所拥有的代码：

#characters_controller.rb
    def new
        @skills = Skill.all
        @classes = Classe.all
        @background = Background.all
        @character = Character.new
    end
    def update_classe_skills
        classe = Classe.find(params[:character][:classe_id])

        @skills = classe.skills.map{|a| [a.name,a.name]}.insert(0,"Select a Skill")
        respond_to do |format|
            format.js
        end
    end


#routes.rb
Rails.application.routes.draw do
    resources :characters
    get 'characters/update_classe_skills', :as => 'update_classe_skills'
end

这是.js.erb文件：

#update_classe_skills.js.erb

$('#character_classe_skill_option_one').html("<%= escape_javascript(options_for_select(@skills)) %>");

这是我的AJAX脚本：

#skills_select_handler.js
$(document).ready(function() {
    $(document).on('change','#character_classe_id', function() {
      $.ajax({
        url: "#{update_classe_skills_path}",
        data: {
          classe_id : $('#character_classe_id').val()
        },
        dataType: "script",
        type: 'GET'
      });
    });
 });

最后，这是我的选择菜单：

#new.html.erb
<%= javascript_include_tag "skills_select_handler.js"  %>
<%= form_for :character, url: characters_path, method: :post do |f| %>
    <%= render :partial => "info_step", :locals => {:f => f} %>
    <%= render :partial => "rand_prompt_step", :locals => {:f => f} %>
    <%= render :partial => "skills_step", :locals => {:f => f}%>
<% end %>
#_info_step.html.erb
<p>
    <%= f.label :classe_id, "Class" %><br>
    <%= f.select :classe_id, options_for_select([["Barbarian", 1], ["Bard", 2], ["Cleric", 3], ["Druid", 4], ["Fighter", 5], ["Monk", 6], ["Paladin", 7], ["Ranger", 8], ["Rogue", 9], ["Sorcerer", 10], ["Warlock", 11], ["Wizard", 12]], selected: "#{@character.classe_id}"), include_blank: true, id:'character_classe_id' %>
    <span><%= @character.errors[:classe_id][0] %></span>
</p>

#_skills_step.html.erb
<div id="classe_skill_proficiency_one">
    <p>
        <%= f.label :classe_skill_option_one, "Skill Proficiency" %>
        <br>
        <%= f.collection_select(:classe_skill_option_one, @skills, :name, :name,{:prompt   => "Select a Skill"}, {id: 'character_classe_skill_option_one'})%>
    </p>
</div>

我曾经从“新”视图渲染所有部分，但是那是行不通的。我自己尝试过对它进行故障排除，因此情况可能有些奇怪。

更改类后查看服务器控制台时，确实看到以下内容：

Processing by CharactersController#new as JS
  Parameters: {"classe_id"=>"1", "_"=>"1454977094482"}
  [list of stuff being loaded and rendered]
  Skill Load (0.0ms)  SELECT "skills".* FROM "skills"

因此，这使我相信它在AJAX请求方面处于领先地位，但随后仅加载整个技能列表，而不是加入特定班级的技能。

联接表正确制作，所以这不是问题。

有人对如何获取选择菜单以更改其选项有任何想法吗？

最佳答案

做这个：

#config/routes.rb
resources :characters
  get "update_classe_skills/:classe_id", as: 'update_classe_skills', on: :collection #-> url.com/characters/update_classe_skills/:classe_id
end

#skills_select_handler.js
$(document).on("change","#character_classe_id", function(e) {
  var classe_id = $(this).val();
  $.ajax({
     url: "characters/update_classe_skills/" + classe_id,
     data: { classe_id : classe_id },
     dataType: "script",
     type: 'GET'
   });
 });

 #app/controllers/characters_controller.rb
 class CharactersController < ApplicationController

    def update_classe_skills
      @classe = Classe.find params[:classe_id]
      respond_to do |format|
        format.js
      end
    end

end

#app/views/characters/update_classe_skills.js.erb
$('select#character_classe_skill_option_one').empty.append("<%=j options_from_collection_for_select(@skills, 'name', 'name') %>");

我相信您的代码中有几个错误：


您的ajax URL依赖于JS值（classe_id），但是您没有它
您的update_classe_skills JS不会更新select（仅更新容器div）
您的控制器方法效率低下

关于javascript - 动态选择菜单栏4，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35282143/