javascript - 在我的 View 页面中实现两个选择

Question

我的表单在我的 View 页面中有两个选择，如下所示

<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...请帮我完成这件事>“<

( Controller 是这样的)

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 来保存子技能选择。当主要技能选择发生变化时，对“/skill_categories/refresh_sub_skill_select?id=123”之类的 url 进行 ajax 调用。此操作应将空子技能 div 的内容替换为部分内容，这反过来又只渲染给定主要技能的子技能选择(从 params[:id] 获取)。