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>

这是我在决定转换之前使用的一些javascript，并尝试使用按钮下拉菜单而不是html选择标记。

<!-- 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选择，但我正在尝试转换为按钮下拉列表

      <!-- 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 $(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 #cece和div＃course在partials上，因此每次点击任何下拉按钮时都会呈现一个模态，并且根据列表项的id，将显示其相应的partial。

Rails＆amp; Javascript：在基于模式的引导按钮下拉列表中渲染部分

1 个答案: