单击时重置引导下拉按钮值

Question

我正在使用 Bootstrap Dropdown 组件来代替普通的选择菜单。当用户在下拉菜单中选择一个选项时，它会显示在下拉按钮上。这工作正常，但我需要允许用户使用 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 说明了这个问题。

正如您所看到的，当单击“清除”按钮时，它会从 Bootstrap 下拉按钮中删除所有内容，但这是错误的，因为我需要像刷新页面一样重置回默认值？

Answer 1

您可以使用“清除”按钮本身来将下拉菜单的默认值保存为按钮的属性。

在 dom 准备就绪时，您可以保存这样的值并在一段代码中处理点击事件：

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

sn-p (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

您应该将默认值存储在变量中并将其注入重置函数中。