Question

我的表单在我的视图页面中有两个选择，如此

<div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <p>Main</p>
                <div class="top5">
                  <select name="main" id="mainClass_select" class="form-control">
                    <option value="-1">All</option>
                    <% t(:main_skill_category).each_with_index do |main_one, index| %>
                    <% if index == @main_skill_id %>
                    <option value="<%= index %>" selected><%= main_one['name'] %></option>
                    <% else %>
                    <option value="<%= index %>"><%= main_one['name'] %></option>
                    <% end %>
                    <% end %>
                  </select>
                </div>   
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <p>子類別</p>
                <div class="top5">
                  <select name="sub" id="subClass_select2" class="form-control" >
                    <option value="-1">All</option>
                    <% t(:sub_skill_category)[@main_skill_id].each_with_index do |sub_one, index| %>
                    <% if index == @sub_skill_id %>
                    <option value="<%= index %>" selected><%= sub_one['name'] %></option>
                    <% else %>
                    <option value="<%= index %>"><%= sub_one['name'] %></option>
                    <% end %>
                    <% end %>
                  </select>
                </div>
              </div>
            </div>
          </div>

我希望用户选择主选择后，子选择将更改选项。（我的语言环境中有一个yml文件。例如英文版：）

main_skill_category: [
{name: "IT、Software"},
{name: "Engineering、Science"},
{name: "Design、Creativity"},
{name: "Business、Marketing "},
{name: "General Affairs、Customer Services"},
{name: "Business、Accounting、Legal"},
{name: "Writing、Translation"},
{name: "Professional Advisory"}
]

sub_skill_category: [
[
  {name: "Programming", title: ""},
  {name: "Program test / debug", title: ""},
  {name: "E-commerce platform", title: ""},
  {name: "Web development", title: ""},
  {name: "Web planning", title: ""},
  {name: "Web test", title: ""},
  {name: "Web Applications", title: ""},
  {name: "Mobile App", title: ""},
  {name: "Software interface", title: ""},
  {name: "Utility software", title: ""},
  {name: "Entertainment and gaming applications", title: ""},
  {name: "Scripting language (Scripting)", title: ""},
  {name: "Plug-ins", title: ""},
  {name: "IT project management", title: ""},
  {name: "Internet telephony (VoIP)", title: ""},
  {name: "Information systems architecture", title: ""},
  {name: "Management information system (MIS)", title: ""},
  {name: "Information system provisioning", title: ""},
  {name: "Enterprise resource planning (ERP)", title: ""},
  {name: "Other - IT / Software", title: ""}
],
[
  {name: "Data mining / analysis", title: ""},
  {name: "CAD / CAM", title: ""},
  {name: "Manufacturing engineering", title: ""},
  {name: "Product development", title: ""},
  {name: "Industrial engineering", title: ""},
  {name: "Chemical engineering", title: ""},
  {name: "Materials engineering", title: ""},
  {name: "Electronics engineering", title: ""},
  {name: "Mechanical engineering", title: ""},
  {name: "Biological engineering", title: ""},
  {name: "Mathematical statistics", title: ""},
  {name: "Quality control analysis", title: ""},
  {name: "Design engineering", title: ""},
  {name: "Engineering project management", title: ""},
  {name: "Mathematics", title: ""},
  {name: "Physics", title: ""},
  {name: "Chemistry", title: ""},
  {name: "Other - Engineering / Science", title: ""}
],
[
  {name: "Graphics", title: ""},
  {name: "Logo、 Corporate identity system", title: ""},
  {name: "Visual design", title: ""},
  {name: "Drawing", title: ""},
  {name: "Printing design", title: ""},
  {name: "Photography", title: ""},
  {name: "Computer-aided design", title: ""},
  {name: "3D Design", title: ""},
  {name: "Audio effects", title: ""},
  {name: "Video / Movie", title: ""},
  {name: "Dubbing", title: ""},
  {name: "Animation", title: ""},
  {name: "Framework design", title: ""},
  {name: "Website design", title: ""},
  {name: "User interface design", title: ""},
  {name: "Fashion design", title: ""},
  {name: "Industrial esign", title: ""},
  {name: "Other - Design / Creativity", title: ""}
],
[
  {name: "Promotions", title: ""},
  {name: "E-mail and internet marketing", title: ""},
  {name: "Telemarketing", title: ""},
  {name: "Search engine optimization and marketing", title: ""},
  {name: "Social media marketing", title: ""},
  {name: "Customer / Media relations", title: ""},
  {name: "Business planning / strategy", title: ""},
  {name: "Market research", title: ""},
  {name: "Sales", title: ""},
  {name: "Other - Business / Marketing", title: ""}
],
[
  {name: "Typing and data entry", title: ""},
  {name: "IT assistant", title: ""},
  {name: "Sales assistant", title: ""},
  {name: "Accounting assistant", title: ""},
  {name: "Business correspondence", title: ""},
  {name: "Transcription", title: ""},
  {name: "On-line customer services", title: ""},
  {name: "Field support / On-site services", title: ""},
  {name: "Quotation / Order processing", title: ""},
  {name: "Inventory processing", title: ""},
  {name: "Other - General affairs / Customer services", title: ""}
],
[
  {name: "General accounting", title: ""},
  {name: "Computer billing system", title: ""},
  {name: "Salary", title: ""},
  {name: "Financial services", title: ""},
  {name: "Financial planning and forecasting", title: ""},
  {name: "Financial statements", title: ""},
  {name: "Procurement process", title: ""},
  {name: "Legal", title: ""},
  {name: "Intellectual property protection", title: ""},
  {name: "Project management", title: ""},
  {name: "Human resources", title: ""},
  {name: "Recruitment", title: ""},
  {name: "Actuary", title: ""},
  {name: "Other - Business services", title: ""}
],
[
{name: "Blog writing", title: ""},
{name: "Ghostwriting", title: ""},
{name: "Tweets writing", title: ""},
{name: "Creative writing", title: ""},
{name: "Editorial", title: ""},
{name: "On-line journalist", title: ""},
{name: "Technical writing", title: ""},
{name: "Literature review", title: ""},
{name: "Translation、interpretation、verbatim", title: ""},
{name: "Other - Writing / Translation", title: ""}
],
[
  {name: "Legal adviser", title: ""},
  {name: "Travel consultant", title: ""},
  {name: "Immigration consultant", title: ""},
  {name: "Technical consultant", title: ""},
  {name: "Culinary consultant", title: ""},
  {name: "Language / Communication consultant", title: ""},
  {name: "Marketing consultant", title: ""},
  {name: "Overseas jobs consulting", title: ""},
  {name: "Business consultant", title: ""},
  {name: "Consultanting analysis", title: ""},
  {name: "Service advisor", title: ""},
  {name: "Other - Consultant", title: ""}
]
]

但我不擅长javascript ... 请帮我完成这个＆gt;“＆lt;

（控制器是这样的）

def new
  @main_skill_id = params[:main].nil? ? -1 : params[:main].to_i
  @sub_skill_id = params[:sub].nil? ? -1 : params[:sub].to_i
  @project = Project.new
end

Answer 1

我希望从数据库驱动这些技能类别和子技能，而不是yaml文件。然后选择将通过skill_category_id和sub_skill_id

当你来做选择时，你有两个策略：你选择哪一个取决于你可能有多少子技能。

A）渲染主要技能类别，然后渲染所有子技能选择，但使用style="display:none;"隐藏它们。确保每个都有一个id，它将它们链接到主要技能选择中的选项。在主要技能选择中添加一个on change事件，以隐藏当前显示的子技能选择，并在主要技能选择中显示id与所选选项匹配的那个。

B）Ajax。如果你有很多技能和很多子技能（例如数千个），那么为每个技能渲染一个选择可能会导致你的页面加载速度变慢。因此，只需渲染主要技能选择，并制作一个空div来保持子技能选择。当主要技能选择发生变化时，对像＃34; / skill_categories / refresh_sub_skill_select？id = 123＆＃34;这样的网址进行ajax调用。这个动作应该用一个局部替换空子技能div的内容，这反过来只是渲染给定主要技能的子技能选择（从params [：id]获得）。

在我的视图页面中实现两个选择

1 个答案: