带MVC的引导程序下拉菜单 - 保持上次选择的值显示

问题描述:

我在Coverage MVC视图中具有以下引导程序下拉列表。它默认为“活动”状态。当选择另一个状态时,相关的项目会显示在页面上,例如“Past Coverage”。带MVC的引导程序下拉菜单 - 保持上次选择的值显示

  <div class="dropdown"> 
      <button id="statusButton" class="btn dropdown-toggle ddlDisplay" type="button" data-toggle="dropdown"> 
       Active 
       <span class="caret"></span> 
      </button> 
      <ul id="statusDropdown" class="dropdown-menu"> 
       <li><a href="@Url.Action("Coverage", "Coverage", new { status = "A" })">Active</a></li> 
       <li><a href="@Url.Action("Coverage", "Coverage", new { status = "P" })">Past Coverage</a></li> 
       <li><a href="@Url.Action("Coverage", "Coverage", new { status = "R" })">Researching Now</a></li> 
      </ul> 
     </div> 

我有以下javascript来更改下拉菜单的html,所以在这种情况下,它会说“过去的覆盖率”。

$(".dropdown-menu li a").click(function() { 
    var selText = $(this).text(); 
    $("#statusButton").html(selText + '<span class="caret"></span>'); 

这工作得很好,但你只能看到,在这种情况下,“过去覆盖”,一秒钟,因为则href链路发射时,MVC Url.Action被调用时,页面重新加载和活动再次显示在下拉列表中。我如何将最近选中的状态保留在下拉列表中?

您可以使用localStorage进行存储。如果您想以每页会话为基础进行存储,则可以使用sessionStorage

像这样的东西应该做..不要忘了在需要时通过拨打localStorage.clear();来清除localStorage。

$(".dropdown-menu li a").click(function() { 
    var selText = $(this).text(); 
    $("#statusButton").html(selText + '<span class="caret"></span>'); 
    localStorage['selText'] = selText; // store in storage 
|); 

$(document).ready(function() { 
    var selText = localStorage['selText'] || 'defaultValue'; 

    if(selText != 'defaultValue') { 
     $("#statusButton").html(selText + '<span class="caret"></span>'); // Load previously selected item 
    } 
}); 

我还没有特别做过这样的事情,所以除了这个以外,还有更好的办法。但这应该工作。

+0

工程。谢谢!! – Scott