Rails & Javascript：在基于 bootstrap 按钮下拉列表的模态中呈现部分

Question

我正在尝试弄清楚如何获得 bootstrap 按钮下拉菜单以呈现嵌套表单内的部分内容。基本上此时我有下拉按钮可以打开模态，但是模态主体是空的。模态的内容应根据用户按下的下拉菜单 link 显示不同的部分。

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

<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 post jQuery $(this).val returns 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 对应将显示部分。

Rails & Javascript：在基于 bootstrap 按钮下拉列表的模态中呈现部分

Rails & Javascript: Render a partial in a modal based off bootstrap button dropdown

javascript

jquery

ruby-on-rails

ruby-on-rails-5.1