侧栏选择后不显示下拉列表

Question

在我的rails 5.1.1应用程序中，我有3个（现在）相同的页面，containing each 3 dropdown menus用于根据选定的选项呈现特定的部分。 （使用jQuery的变化（））。这一切运作良好，但问题是，如果我使用边栏从一页到另一页，the dropdown menu is not shown，我必须手动刷新页面才能显示。如果我通过键入URL进入页面，则所有内容都应该显示。任何想法为什么？

这里是“/政策”页面的下拉菜单（代码可能是有点乱，因为我刚开始用网络的研究与开发）：

<div class="container-fluid" style="height: 90rem;" > 
    <div class="row"><h1 class="page-header" style="color: #777777">Privacy settings<small> <br>Here is a list of the available privacy settings on different social networks. Click on a setting to see its details </small></h1><br> 


    </div> 

    <div class="row" style="padding-bottom: 3rem;text-align: center"> <!-- selection row --> 

    <div class="col-md-3 col-md-offset-1 dropsel"> <!-- first column --> 

     <select id="selectMe2" class="selectpicker" data-width="fit" title="Choose social network" > 
     <option>None</option> 
     <option value="facebook2">Facebook</option> 
     <option value="twitter2">Twitter</option> 
     <option value="linkedin2">LinkedIn</option> 
     <option value="google2">Google +</option> 
     <option value="pinterest2">Pinterest</option> 
     </select> 
    </div> 

     <div class="col-md-3 dropsel" > <!-- second column --> 

     <select id="selectMe3" class="selectpicker" data-width="fit" title="Choose social network"> 
      <option>None</option> 
      <option value="facebook3">Facebook</option> 
      <option value="twitter3">Twitter</option> 
      <option value="linkedin3">LinkedIn</option> 
      <option value="google3">Google +</option> 
      <option value="pinterest3">Pinterest</option> 
     </select> 

     </div> 

     <div class="col-md-3 dropsel" > <!-- third column --> 

      <select id="selectMe4" class="selectpicker" data-width="fit" title="Choose social network"> 
      <option>None</option> 
      <option value="facebook4">Facebook</option> 
      <option value="twitter4">Twitter</option> 
      <option value="linkedin4">LinkedIn</option> 
      <option value="google4">Google +</option> 
      <option value="pinterest4">Pinterest</option> 
      </select> 

     </div> 
    </div> 


<div class="row"> <!-- content row --> 
    <div class="col-md-3 col-md-offset-1 dropcont"> <!-- first content column --> 


     <div id="facebook2" class="group2" > 
     <%= render partial:"fbpartial" %> 
     </div> 

     <div id="twitter2" class="group2" > 
     <%= render partial:"twpartial" %> 
     </div> 

     <div id="linkedin2" class="group2" > 
     <%= render partial:"lkpartial" %> 
     </div> 

     <div id="google2" class="group2" > 
     <%= render partial:"googlepartial" %> 
     </div> 

     <div id="pinterest2" class="group2" > 
     <%= render partial:"pinpartial" %> 
     </div> 
    </div><!-- /first column --> 


    <div class="col-md-3 dropcont"> <!-- second content column --> 

     <div id="facebook3" class="group3" > 
     <%= render partial:"fbpartial" %> 
     </div> 

     <div id="twitter3" class="group3" > 
     <%= render partial:"twpartial" %> 
     </div> 

     <div id="linkedin3" class="group3" > 
     <%= render partial:"lkpartial" %> 
     </div> 

     <div id="google3" class="group3" > 
     <%= render partial:"googlepartial" %> 
     </div> 

     <div id="pinterest3" class="group3" > 
     <%= render partial:"pinpartial" %> 
     </div> 
    </div><!-- /second column --> 

    <div class="col-md-3 dropcont"> <!-- third content column --> 

     <div id="facebook4" class="group4" > 
     <%= render partial:"fbpartial" %> 
     </div> 

     <div id="twitter4" class="group4" > 
     <%= render partial:"twpartial" %> 
     </div> 

     <div id="linkedin4" class="group4" > 
     <%= render partial:"lkpartial" %> 
     </div> 

     <div id="google4" class="group4" > 
     <%= render partial:"googlepartial" %> 
     </div> 

     <div id="pinterest4" class="group4" > 
     <%= render partial:"pinpartial" %> 
     </div> 
    </div><!-- /third column --> 



    </div> 
</div> 

<!-- scripts --> 

<script> 
    $(document).ready(function() { 
     $('.group2').hide();//hide 
     //set default class to be shown here, or remove to hide all 
       $('#selectMe2').change(function() {//on change do stuff 
      $('.group2').hide();//hide all with .group2 class 
      $('#'+$(this).val()).show(); //show selected option's respective element 
     }) 
    });</script> 

<script> 
    $(document).ready(function() { 
     $('.group3').hide();//hide 
     //set default class to be shown here, or remove to hide all 
     $('#selectMe3').change(function() {//on change do stuff 
      $('.group3').hide();//hide all with .group2 class 
      $('#'+$(this).val()).show(); //show selected option's respective element 
     }) 
    });</script> 

<script> 
    $(document).ready(function() { 
     $('.group4').hide();//hide 
     //set default class to be shown here, or remove to hide all 
     $('#selectMe4').change(function() {//on change do stuff 
      $('.group4').hide();//hide all with .group2 class 
      $('#'+$(this).val()).show(); //show selected option's respective element 
     }) 
    });</script> 

，这里是布局的相关部分含侧边栏（“大众”，“政策”和“privacy_setting”页面暂时相同：

[<div id="wrapper" class="toggled" style="background-color: whitesmoke; "> 

    <!-- Sidebar --> 
    <div id="sidebar-wrapper" style="width: 22rem; overflow-x: hidden;"> 
    <div class="profile-sidebar"> 
     <!-- SIDEBAR USERPIC --> 
     <div class="profile-userpic"> 
     <img src="http://lorempixel.com/400/400/people/1" class="img-responsive" alt=""> 
     </div> 
     <!-- END SIDEBAR USERPIC --> 
     <!-- SIDEBAR USER TITLE --> 
     <div class="profile-usertitle"> 
     <div class="profile-usertitle-name"> 
      Sandra Monty 
     </div> 
     <div class="profile-usertitle-job"> 
      Welcome 
     </div> 
     </div> 
     <!-- END SIDEBAR USER TITLE --> 
     <!-- SIDEBAR BUTTONS --> 
     <div class="profile-userbuttons"> 

     </div> 
     <!-- END SIDEBAR BUTTONS --> 
     <!-- SIDEBAR MENU --> 
     <div class="profile-usermenu"> 
     <ul class="nav"> 
      <li class="<%= 'active' if params\[:controller\] == 'privacy_setting' %>"> 
      <a href="privacy_setting"> 
       <i class="fa fa-cogs" aria-hidden="true"></i> 
       Privacy Settings </a> 
      </li> 
      <li class="<%= 'active' if params\[:controller\] == 'policy' %>"> 
      <a href="policy"> 
       <i class="fa fa-user-secret" aria-hidden="true"></i> 
       Privacy Policy </a> 
      </li> 
      <li class="<%= 'active' if params\[:controller\] == 'public' %>"> 
      <a href="public"> 
       <i class="fa fa-globe" aria-hidden="true"></i> 
       Public information </a> 
      </li> 

      <li class="<%= 'active' if params\[:controller\] == 'about' %>"> 
      <a href="about"> 
       <i class="fa fa-info-circle" aria-hidden="true"></i> 
       About </a> 
      </li> 
     </ul> 
     </div> 
     <!-- END MENU --> 
     <div class=" row bottom-buttons"> 
     <div class="col-md-4"> 
     <a data-toggle="tooltip" data-placement="top" title="Settings"> 
      <i class="fa fa-cog" aria-hidden="true"></i> 
     </a> 
     </div> 
     <div class="col-md-4"> 
     <a data-toggle="tooltip" data-placement="top" title="FullScreen"> 
      <i class="fa fa-arrows-alt" aria-hidden="true"></i> 
     </a> 
     </div> 
      <div class="col-md-4"> 
     <a data-toggle="tooltip" data-placement="top" title="Logout"> 
      <i class="fa fa-sign-out" aria-hidden="true"></i> 
     </a> 
     </div> 
     </div> 
     <div class="force-to-bottom"> 
     <h5> Privacy Dashboard Prototype</h5> 
     </div> 
    </div> 
    </div> 
    <!-- /#sidebar-wrapper --> 

    <!-- Page Content --> 
    <div id="page-content-wrapper" style="background-color: whitesmoke"> 

      <%= yield %> 

    </div> 
    <!-- /#page-content-wrapper -->] 

Answer 1

你的问题可能是由这是由Rails的加载默认Turbolinks引起它加速了渲染页面。使用AJAX，但它可以通过不执行unl来搞乱你的JavaScript让你刷新页面。用一个事件监听器来封装每个JavaScript函数，用于turbolinks加载并可以解决您的问题。

$(document).on('turbolinks:load', function() { 
    ...your jQuery/javascript goes here... 
});