0

我有两个下拉菜单，例如sub_element和material。我添加了一些 javascript 来更改material取决于sub_element选择的值。现在，该sub_element表有另一列称为Answer_Type。此列的值为“M”和“T”。因此，material如果表中的“Answer_Type”为“T”，则下拉菜单应更改sub_element。请提出任何想法来做到这一点。请参考以下页面。

<% 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} } 
elements.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} }
sub_elements.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} }
materials.to_json.html_safe
%>

<% end %>
<div class="styled-select">
<%= 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, [], { :prompt => 'Please Select' }  %>
    </div>


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

    <div class="field">
      <%= f.label :Sub_Element_Code %><br/>
      <%= f.select :Sub_Element_Code, [], { :prompt => 'Please Select' } %>

    </div>  

    <div class="field">
      <%= f.label :Material_Code %><br/>
      <%= f.select :Material_Code, [], { :prompt => 'Please Select' } %>
      // Here i want to add a text box by if condition //    
      <% end %>
    </div>

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

这是Javascript页面

$(function() {
  if ($('html.enr_rds_surv_rdsap_xrefs.new, html.enr_rds_surv_rdsap_xrefs.createElement, '+
    'html.enr_rds_surv_rdsap_xrefs.edit, html.enr_rds_surv_rdsap_xrefs.update').length == 0) return;

  var master_survey_dropdown = document.getElementById('enr_rds_surv_rdsap_xref_master_survey');
  var element_dropdown = document.getElementById('enr_rds_surv_rdsap_xref_Element_Code');
  var sub_element_dropdown = document.getElementById('enr_rds_surv_rdsap_xref_Sub_Element_Code');
  var material_dropdown = document.getElementById('enr_rds_surv_rdsap_xref_Material_Code');

  var dropdowns = [master_survey_dropdown, element_dropdown, sub_element_dropdown, material_dropdown];

  var populate_dropdown = function(dropdown_number, values) {
    var dropdown;
    // remove all but the first option
    for (var i=dropdown_number; i<dropdowns.length; i++) {
      dropdown = dropdowns[i];
      $(' > option + option', dropdown).each(function() {
        this.parentNode.removeChild(this);
      });
    };
    dropdown = dropdowns[dropdown_number];
    for (var i=0; i<values.length; i++) {
      var value = values[i];

      var option = document.createElement('option');
      option.value = value.id;
      $(option).text(value.to_s);

      dropdown.appendChild(option);
    };
  };


  populate_dropdown(0, master_surveys);

  $(master_survey_dropdown).change(function() {
    var master_survey_id = master_survey_dropdown.value;
    populate_dropdown(1, elements[master_survey_id]);
  });

  $(element_dropdown).change(function() {
    var element_id = element_dropdown.value;
    populate_dropdown(2, sub_elements[element_id]);
  });

  $(sub_element_dropdown).change(function() {
    var sub_element_id = sub_element_dropdown.value;
    populate_dropdown(3, materials[sub_element_id]);
  });


});

所以，在最后一个字段中，我想通过表中的值将下拉列表更改为文本Answer_Type框Sub_Element。

4

0 回答 0