javascript - 如何将JavaScript包含到Ruby on Rails的下拉列表中？

Question

我有一个 javascript 文件，用于从不同模型加载级联下拉框。但我不知道如何包含在下拉列表中。

表格:

<% content_for :javascript do %>

var master_surveys = <%= 
 Condition::MasterSurvey.all.map {|ms| {id: ms.Master_Survey_Code, to_s: ms[:Master_Survey_Name]}}.to_json.html_safe
%>

var elements = <%= elements = Hash.new { |hash, code| hash[code] = [] }
Condition::Element.all.each {|e| elements[e.Master_Survey_Code] << {id: e.Element_Code, to_s: e.Element} }.to_json.html_safe
%>

var sub_elements = <%= sub_elements = Hash.new { |hash, code| hash[code] = [] }
Condition::SubElement.all.each {|s| sub_elements[s.Element_Code] << {id: s.Sub_Element_Code, to_s: s.Sub_Element} }.to_json.html_safe
%>

var materials = <%=
materials = Hash.new { |hash, code| hash[code] = [] }
Condition::RenewSchedule.all.each {|rs| materials[rs.Sub_Element_Code] << {id: rs.Material_Code, to_s: rs.Material} }.to_json.html_safe
%>

$(document).ready(function(){
 $('select#enr_rds_surv_rdsap_xref_master_survey').chainedTo('select#enr_rds_surv_rdsap_xref_Element_Code');
});
<% end %>

<%= form_for(@enr_rds_surv_rdsap_xref) do |f| %>
  <% if @enr_rds_surv_rdsap_xref.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@enr_rds_surv_rdsap_xref.errors.count, "error") %>:</h2>

      <ul>
      <% @enr_rds_surv_rdsap_xref.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

    <div class="field">
      <%= f.label :Master_Survey %><br/>
      <%= f.select :master_survey, Condition::MasterSurvey.all.map{|e| [e.Master_Survey_Code]}, { :prompt => 'Please Select' }  %>
    </div>


    <div class="field">
      <%= f.label :Element_Code %><br/>
      <%= f.select :Element_Code, Condition::Element.all.map{|e| [e.Element, e.Element_Code]}, { :prompt => 'Please Select' } %>
    </div>

    <div class="field">
      <%= f.label :Sub_Element_Code %><br/>
      <%= f.select :Sub_Element_Code, Condition::SubElement.all.map{|e| [e.Sub_Element, e.Sub_Element_Code]}, { :prompt => 'Please Select' } %>

    </div>  

    <div class="field">
      <%= f.label :Material_Code %><br/>
      <%= f.select :Material_Code, Condition::RenewSchedule.all.map{|e| [e.Material]}, { :prompt => 'Please Select' } %>
    </div>

  <div class="actions">
    <%= f.submit 'Save'%>
  </div>
<% end %>

所以，上面的 javascript 文件从父级收集数据。在表单中，我创建了一个下拉列表，静态加载数据库中的数据。我想包含 javascript 以动态自动加载到下拉列表中。

提前致谢!!!!

Answer 1

我通常通过 Ajax 和部分(或页面，由你决定)来完成，不太好，但可能有帮助？

即使在您的父级选择上也可以绑定(bind)更改。喜欢

$("#parent_select").change(function(){
    $.ajax({
        url: '/parents/'+$(this).val()+'/childs/',
        complete: function(data){
            $('#children_select').html(data);
        }
    })
});

并在您的子 Controller 中渲染仅包含所选子项选项内容的部分(或页面)。像:

<%children.each do |child|%>
<option value='<%=child.id%>'><%=child.name%></option>
<%end%>