重置引導程序下拉按鈕值點擊

Question

我正在使用引導程序下拉組件取代正常的選擇菜單。當用戶在下拉列表中選擇一個選項時，它將顯示在下拉按鈕上。這工作正常，但我需要允許用戶通過onclick函數將按鈕重置爲默認值。

HTML：

<ul class="nav nav-pills left"> 
      <li class="dropdown active span8"> 
       <a class="dropdown-toggle" id="inp_impact" data-toggle="dropdown"> 
        <i class="icon icon-envelope icon-white"></i>&nbsp;Select<span class="caret"></span></a> 
       <ul ID="divNewNotifications" class="dropdown-menu"> 
         <li><a>One</a></li> 
          <li><a>Two</a></li>  
          <li><a>Three</a></li>       
       </ul> 
      </li> 
     </ul> 

     <button class="resetdropdown">Clear</button> 

JS：

$('#divNewNotifications li').on('click', function() { 
$('.dropdown-toggle').html($(this).find('a').html()); 
}); 


$('.resetdropdown').on('click', function() { 
$('.dropdown-toggle').html(" "); 
}); 

這JSFiddle演示了問題。

正如您所看到的，當單擊「清除」按鈕時，它會從引導下拉按鈕中刪除所有內容，但這是錯誤的，因爲我需要將其重置爲默認值，就像頁面已被刷新一樣？

Answer 1

您可以使用清除按鈕本身，以便將下拉列表的默認值保存爲按鈕的屬性。

在DOM已準備就緒，你可以保存這樣的值，並在一段代碼處理click事件：

$('.resetdropdown').on('click', function(e) { 
    // 
    // if the attribute doesn't exist add it... 
    // 
    if ($(this).attr('defValue') == undefined) { 
     $(this).attr('defValue', ' ' + $('.dropdown-toggle') 
       .contents().get(2).textContent + ' '); 
    } else { 
     // 
     // ...else do the click event stuff 
     // 
     $('.dropdown-toggle').contents().get(2).textContent = 
       ' ' + $(this).attr('defValue') + ' '; 
    } 
}).trigger('click'); // trigger the click immediately after event handler declaration. 

的片段（updated jsfiddle）：

$('#divNewNotifications li').on('click', function(e) { 
 
    $('.dropdown-toggle').contents().filter(function(idx, ele) { 
 
     return ele.nodeType == Node.TEXT_NODE && ele.textContent.trim().length != 0 
 
    }).get(0).textContent = ' ' + this.textContent.trim() + ' '; 
 
}); 
 

 

 
$('.resetdropdown').on('click', function(e) { 
 
    if ($(this).attr('defValue') == undefined) { 
 
     $(this).attr('defValue', ' ' + $('.dropdown-toggle').contents().get(2).textContent + ' '); 
 
    } else { 
 
     $('.dropdown-toggle').contents().get(2).textContent = ' ' + $(this).attr('defValue') + ' '; 
 
    } 
 
}).trigger('click');

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 
 

 

 
<ul class="nav nav-pills left"> 
 
    <li class="dropdown active span8"> 
 
     <a class="dropdown-toggle" id="inp_impact" data-toggle="dropdown"> 
 
      <i class="icon icon-envelope icon-white"></i>&nbsp;Select<span class="caret"></span></a> 
 
     <ul ID="divNewNotifications" class="dropdown-menu"> 
 
      <li><a>One</a></li> 
 
      <li><a>Two</a></li> 
 
      <li><a>Three</a></li> 
 
     </ul> 
 
    </li> 
 
</ul> 
 

 
<button class="resetdropdown"> 
 
    Clear 
 
</button>

Answer 2

您應該將您的默認值存儲在變量中，並將其注入重置功能中。