リセット時のブートストラップドロップダウンボタンの値

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

ボタンの属性としてドロップダウンリストのデフォルト値を保存するには、[クリア]ボタンを使用します。

$('.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

デフォルト値を変数に格納し、リセット関数に注入する必要があります。