jquery - Twitter Bootstrap 下拉触发表单提交（搜索）

Question

<div class="btn-toolbar search-dropdown" style="float:left;margin-right:10px;">
    <div class="btn-group">
        <button class="btn btn-small">All Types</button>
        <button data-toggle="dropdown" class="btn btn-small dropdown-toggle"><span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="search-type">
            <li>
                <label class="checkbox">
                    <input type="checkbox" name="tv" value="TV">TV</input></label>
            </li>
            <li>
                <label class="checkbox">
                    <input type="checkbox" name="movies" value="Movies">Movies</input></label>
            </li>
        </ul>
    </div>
</div>

Answer 1

这是因为<button>元素默认提交自己的表单——它们继承了该type="submit"属性。

如果您不希望他们这样做，请添加属性type="button"，这样它将成为普通按钮。

Answer 2

如果您不想在单击复选框时关闭下拉框，那么您可以这样做：

jQuery(document).ready(function($){

    $('input[type="checkbox"]').on('click',function(event){
        event.stopPropagation();

    });

});

Answer 3

为下拉切换使用一个<a>元素，而不是。<button>唯一的缺点是如果混合使用不同的类型，渲染中可能会出现不一致。如果您对此感到担心，请将提交按钮切换为<a>也，并使用 javascript onclick 提交表单。

Answer 4

<div class="btn-toolbar search-dropdown" style="float:left;margin-right:10px;">
<div class="btn-group">
    <button class="btn btn-small">All Types</button>
    <button data-toggle="dropdown" class="btn btn-small dropdown-toggle"><span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="search-type">
        <li>
            <label class="checkbox">
                <input type="checkbox" name="tv" value="TV" onclick="search()">TV</input></label>
        </li>
        <li>
            <label class="checkbox">
                <input type="checkbox" name="movies" value="Movies" onclick="search()">Movies</input></label>
        </li>
    </ul>
</div>