动态选择嵌套表单轨道

How do js get the selected value in a dropdown and pass it to the controller so that it returns a list of names for the other dropdown?

js如何在下拉列表中获取所选值并将其传递给控制器​​，以便它返回另一个下拉列表的名称列表？

What I've done so far: salmonellas.js

到目前为止我做了什么：salmonellas.js

$(function () {
   $('body').on('change', "#mode_change", function () {
        var selectedText = $(this).find("option:selected").text();
        var selectedValue = $(this).val();
        if (selectedText) {
          $.get('/salmonellas/find_stages?mode_title='+ selectedText, function(selectedText) {                
            return $(selectedText).html();
          });
        }
    });
});

salmonellas/form.html.erb

沙门氏菌/ form.html.erb

<div class="process_salmonellas">
    <% f.simple_fields_for :process_salmonellas do |process_salmonella| %>
        <%= render 'process_salmonella_fields', :f => process_salmonella %>
    <% end %>
</div>

salmonellas/_process_salmonella_fields.html.erb

沙门氏菌/ _process_salmonella_fields.html.erb

<div class="mode_change" id="mode_change">
    <%= f.collection_select :title, Mode.order(:name), :id, :name, class: 'mode_change', id:'mode_change', include_blank: true, "data-content": :mode_id%>
</div>
<h4>Stage</h4>
<div class="stage">
    <% f.simple_fields_for :stages do |stage| %>
        <%= render 'stage_fields', :f => stage %>
    <% end %>
</div>

salmonella/_stage_fields.html.erb

沙门氏菌/ _stage_fields.html.erb

<div class="form-inputs">
    <%= f.grouped_collection_select :title, Mode.order(:name), :steps, :name, :id, :name, class: "step_selection" %>
</div>

salmonellas_controller.rb

salmonellas_controller.rb

def find_stages
    @mode = Mode.where("name = ?", params[:mode_title])
    @steps = @mode.steps
end

Is looking for another model, why the fields have to be pre-registered. I'm using cocoon to let it nested.

正在寻找另一种模式，为什么这些领域必须预先注册。我正在使用茧让它嵌套。

Updating

更新

salmonellas/_process_salmonella_fields.html.erb

沙门氏菌/ _process_salmonella_fields.html.erb

<div class="form-inputs">
    <%= f.collection_select :title, Mode.order(:name), :id, :name, class: 'mode_change', id:'mode_change', include_blank: true, "data-content": :mode_id%>
</div>
<h4>Stage</h4>
<div class="stage">
    <% f.simple_fields_for :stages do |stage| %>
        <%= render 'stage_fields', :f => stage %>
    <% end %>
</div>

Updating 2

更新2

salmonellas/_process_salmonella_fields.html.erb

沙门氏菌/ _process_salmonella_fields.html.erb

<div class="form-inputs">
    <%= f.collection_select :title, Mode.order(:name), :id, :name, id:'mode_change', include_blank: true %>
</div>

salmonellas.js

salmonellas.js

$(function () {
   $('body').on('change', ".mode_change", function () {
        var selectedText = $(this).find("option:selected").text();
        var selectedValue = $(this).val();
        if (selectedText) {
          $.get('/salmonellas/find_stages?mode_title='+ selectedText, function(selectedText) {                
            return $(selectedText).html();
          });
        }
    });
});

Updating 3

更新3

salmonellas.js

salmonellas.js

 $(function () {
   $(document).on('change', "#mode_change", function () {
        var selectedText = $(this).find("option:selected").text();
        var selectedValue = $(this).val();
        alert("Selected Text: " + selectedText);
    });
});

1 个解决方案

#1

IDs must be unique on your DOM. You are duplicating them for div and select tag. First change them and use this to get the value of selected option

ID必须在您的DOM上是唯一的。您正在为div和select标签复制它们。首先更改它们并使用它来获取所选选项的值

$(document).on('change', ".mode_change", function () {
    var selectedText = $(this).find("option:selected").text();
    var selectedValue = $(this).val();
      ...