Rails＆Javascript：在基于引导按钮下拉菜单的模态中渲染局部

Question

我试图弄清楚如何获得一个引导按钮下拉菜单来呈现嵌套窗体内部的部分。 基本上在这一点上，我具有能够打开模态的下拉按钮，但是模态主体为空。 模态的内容应根据用户按下的下拉链接显示不同的部分。

这是调用模式的按钮下拉列表

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Add <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right">
    <li><a href="#achievementModal" data-toggle="modal" value="cert">Certification</a></li>
    <li><a href="#achievementModal" data-toggle="modal" value="course">Course</a></li>
  </ul>
</div> 

这是我在决定转换并尝试使用按钮下拉列表而不是html select标记之前使用的一些javascript。

<!-- JQuery to show the form partials based on user selection -->
<script type="text/javascript">
$(document).ready(function() {
   $("select#select_id").bind("change",function() {
     if ($(this).val() == "cert") 
      $("div#cert").show(); 
     else
      $("div#cert").hide(); 

     if ($(this).val() == "course") 
      $("div#course").show(); 
     else
      $("div#course").hide();        
   })
})
</script>

这是嵌套形式

  <!-- one-to-many nested attributes -->  
  <%= form_for(@user) do |f| %>

    <%= f.fields_for :achievements, Achievement.new do |ff| %>

      <!-- a partial is rendered based on the user dropdown selection -->    
      <div id="cert">
        <%= render partial: "achievements/new_certification", locals: { ff: ff } %>
      </div>
      <div id="course">
        <%= render partial: "achievements/new_course", locals: { ff: ff } %>
   </div>        
    <% end %><!-- fields_for -->

    <%= f.submit 'Save', id: "submit-achievement", class: 'btn btn-primary form-control' %>

  </div><!-- modal body -->

    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>

  <% end %><!-- form_for -->  

这是起作用的旧html select，但是我正在尝试转换为按钮下拉菜单

      <!-- achievement dropdown calls jquery -->    
  <select id="select_id" class="form-control"> 
    <option selected="selected">Select an Achievement</option>      
    <option value="cert"> Certification </option>
    <option value="course"> Course </option>       
  </select>  

Answer 1

好的，我终于开始工作了。 由于这个SO jQuery jQuery $（this）.val被指向正确的方向，所以返回0

            <!-- Single button -->
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Add <span class="caret"></span>
          </button>
          <ul id="select_id" class="dropdown-menu pull-right">
            <li id="cert1" class="dropdown-item"><a href="#achievementModal" data-toggle="modal">Certification</a></li>
            <li id="course1" class="dropdown-item"><a href="#achievementModal" data-toggle="modal">Course</a></li>
          </ul>
        </div>          




 <script>
  $('li.dropdown-item').click(function ()
  {
    //alert(this.id);

     if (this.id == "cert1") 
      $("div#cert").show(); 
     else
      $("div#cert").hide(); 

     if (this.id == "course1") 
      $("div#course").show(); 
     else
      $("div#course").hide();           
  });
  </script>     

div＃cert和div＃course在部分上，因此每次单击任何下拉按钮时都会渲染一个模态，并且将根据列表项的ID显示其相应的部分。