jquery - Rails 4 - 根据嵌套形式中第一个选择菜单中的选择动态填充第二个选择菜单

Question

我的 Rails 4 应用程序中有 Project 和 Ethic 模型。

道德 View 中包含一个嵌套字段表单(使用简单表单简单字段)。道德表单字段嵌套在项目表单中。

道德表单字段有 2 个选择菜单。第一个菜单提供了一组类别选项。第二个选择选项是子类别列表。

我试图弄清楚如何根据第一个选择菜单中所做的选择，使用正确的选项填充第二个选择菜单。

在我的project.js 文件中，我有:

jQuery(document).ready(function() {

   jQuery("#project_ethic_attributes.main_category").change(function() {
      var category = $("#project_ethic_attributes.main_category").val(),
        sub_category = $("#project_ethic_attributes.sub_category"),
        options = [],
        str = "";
      sub_category.find('option').remove();
      if(category == 'Risk of harm'){
      options = ["Physical Harm", "Psychological distress or discomfort", "Social disadvantage", "Harm to participants", "Financial status", "Privacy"]
    }

   });

   // jQuery(".main_category").change(function() {
   //  var category = $(".main_category").val(),
   //      sub_category = $(".sub_category"),
   //      options = [],
   //      str = "";
   //  sub_category.find('option').remove();

   //  if(category == 'Risk of harm'){
   //    options = ["Physical Harm", "Psychological distress or discomfort", "Social disadvantage", "Harm to participants", "Financial status", "Privacy"]
   //  }
   //  else if(category == 'Informed consent'){
   //    options = ["Explanation of research", "Explanation of participant's role in research"]   
   //  }
   //  else if(category == 'Anonymity and Confidentiality'){
   //    options = ["Remove identifiers", "Use proxies", "Disclosure for limited purposes"]
   //  }
   //  else if(category == 'Deceptive practices'){
   //    options = ["Feasibility"]
   //  }
   //  else if(category == 'Right to withdraw'){
   //    options = ["Right to withdraw from participation in the project"]  
   //  }
   //  if(options.length > 0){
   //    for(i=0;i<options.length;i++){
   //      str = '<option value="' + options[i] + '">' + options[i] + '</option>'
   //      sub_category.append(str);
   //    }
   //    sub_category.val(options[0]);
   //  }


});

我不知道我做错了什么。无论我在第一个选项中做出什么选择，第二个选择菜单都会填充属于最后一个类别的选项。

我的项目表单有:

 <%= f.simple_fields_for :ethics do |f| %>
        <%= render 'ethics/ethic_fields', f: f %>
 <% end %>
 <%= link_to_add_association 'Add an ethics consideration', f, :ethics, partial: 'ethics/ethic_fields' %>

我的道德规范领域有:

<%= f.input :category, collection: [ "Risk of harm", "Informed consent", "Anonymity and Confidentiality", "Deceptive practices", "Right to withdraw"], :label => "Principle",  prompt: 'select', id: "main_category" %>


            <%= f.input :subcategory,  collection: text_for_subcategory(@category), :label => "Subcategory", prompt: 'select', id: "sub_category" %>

我的道德观助手有:

def text_for_subcategory(category)
      if category == 'Risk of harm'
            [ "Physical Harm", "Psychological distress or discomfort", "Social disadvantage", "Harm to participants", "Financial status", "Privacy"]
        elsif category == 'Informed consent'
            ["Explanation of research", "Explanation of participant's role in research"]
        elsif category == 'Anonymity and Confidentiality'
            ["Remove identifiers", "Use proxies", "Disclosure for limited purposes"]
        elsif category == 'Deceptive practices' 
            ["Feasibility"] 
        else category == 'Right to withdraw'    
            ["Right to withdraw from participation in the project"] 
       end
    end  

任何人都可以看到我需要做什么来根据第一个选择菜单中所做的选择使用正确的选项填充第二个选择菜单。我想知道我是否不应该在 project.js 文件中编写 jQuery，因为表单字段包含在道德 View 部分(在项目表单中呈现)中。

MIXAN 的建议

我的表单现在有:

<%= f.input :category, collection: [ "Risk of harm", "Informed consent", "Anonymity and Confidentiality", "Deceptive practices", "Right to withdraw"], option:'disabled selected value', :label => "Principle",  prompt: 'select', id: "main_category" %>


        <%= f.input :subcategory,  :label => "Subcategory", prompt: 'select', id: "sub_category", option:'disabled' %>

我必须稍微更改一下表单，因为我使用带有 Rails 的简单表单。我不确定是否已将“禁用选定值”和“禁用”选项正确添加到表单输入中。

目前，表单已呈现，但第二个菜单未填充任何内容。我想知道这是否与js文件中选项标签的使用有关？

ethics.js 具有:

jQuery(document).ready(function() {
  var optionsMap = {
      'Risk of harm': [
        'Physical Harm', 
        'Psychological distress or discomfort', 
        'Social disadvantage', 
        'Harm to participants', 
        'Financial status', 
        'Privacy'
      ],
      'Informed consent': [
        'Explanation of research', 
        "Explanation of participant's role in research"
      ],
      'Anonymity and Confidentiality': [
        'Remove identifiers', 'Use proxies', 'Disclosure for limited purposes'
      ],
      'Deceptive practices': [
        'Feasibility'
      ],
      'Right to withdraw': [
        'Right to withdraw from participation in the project'
      ]
    };

  jQuery('#main_category').change(function() {
    var category = jQuery(this).val(),
        $subCategory = jQuery('#sub_category'),
        newOptions = optionsMap[category];
    $subCategory.attr('disabled', false)
    $subCategory.empty();
    $.each(newOptions, function() {
      $subCategory.append(jQuery("<option></option>").text(this));
    });
  })
});

MIXAN 的修改建议

<%= f.select :category, collection: [ "Risk of harm", "Informed consent", "Anonymity and Confidentiality", "Deceptive practices", "Right to withdraw"], option:'disabled selected value', :label => "Principle", prompt: 'select', html: { id: "main_category" } %>


<%= f.select :subcategory, [], {}, id: "sub_category", disabled: true %>

当我尝试此操作时，第一个类别的菜单下拉菜单的格式发生了更改，但功能与我使用 f.input 时相同。但第二个菜单没有填充任何选项。

Answer 1

使用此代码，针对您的 #id 和 url 进行编辑

// Dynamic Search Model Loader
$(function(){
    var saved = {};
    var options, value;
    $("#selectOne").change(function(){
        options = '<option value="" selected="selected">Loading...</option>';
        $("#selectTwo").html(options);
        value = $(this).val();

        if (saved[value].length > 0) {
           $("#selectTwo").html(saved[value]);
        } else {
          $.ajax({
            url: '/api/get-json-values/?category=' + value, // Set the category as the value or whatever you want it to be
            type: 'GET',
            dataType: 'json',
            async: true
        }).done(function(data){
            options = '<option value="" selected="selected">Please Pick...</option>';
            // Parse through the values
            $.each(data, function(text){
                options += '<option value="' + text + '">' + text + '</option>';
            });
            // Populate the second select menu
            $("#selectTwo").html(options);
            saved[value] = options;
          }).fail(function(data){
            options = '<option value="" selected="selected">Empty...</option>';
            $("#selectTwo").html(options);
          }); // End Ajax
         };
    }); // End Change
});

根据需要对其他选择菜单重复此操作

<小时/>

要求您在 Controller 中创建一个操作，该操作返回包含您想要的值的 JSON。

** 路线.rb **

namespace :api do
    get 'get-json-values', to: 'queries#category_search'
end

Controller 代码:

class API::Queries < ApplicationController

  def category_search
    category = params[:category]

    if category == 'Risk of harm'
      @json = [ "Physical Harm", "Psychological distress or discomfort", "Social disadvantage", "Harm to participants", "Financial status", "Privacy"]
    elsif category == 'Informed consent'
      @json = ["Explanation of research", "Explanation of participant's role in research"]
    elsif category == 'Anonymity and Confidentiality'
      @json = ["Remove identifiers", "Use proxies", "Disclosure for limited purposes"]
    elsif category == 'Deceptive practices' 
      @json = ["Feasibility"] 
    elsif category == 'Right to withdraw'    
      @json = ["Right to withdraw from participation in the project"] 
    else
      @json = nil
    end

    if @json
      render json: @json.to_json, status: 200
    else
      render json: {message: 'Not Found'}, status: 404
    end
  end
end

然后它将遍历它们并将它们作为选项添加到从属选择菜单