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>

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

4 个答案: