twitter-bootstrap – Bootstrap 3下拉列表选择

发布时间：2020-12-18 00:13:03 所属栏目：安全来源：网络整理

导读：我们正在尝试通过引导重新实施我们的注册表单。我们的注册表格包含一个代表公司类型的下拉列表。我已经在网上进行了广泛的搜索，但是我没有看到任何一个表单输入是一个下拉列表的例子。 Bootstrap提供了大量与各种操作相关的下拉列表，但是我需要的是一个下

我们正在尝试通过引导重新实施我们的注册表单。我们的注册表格包含一个代表公司类型的下拉列表。我已经在网上进行了广泛的搜索，但是我没有看到任何一个表单输入是一个下拉列表的例子。

Bootstrap提供了大量与各种操作相关的下拉列表，但是我需要的是一个下拉列表。我已经提出了两个解决方案：

第一：

<label>Type of Business</label>
<select class="form-control">
    <option>small</option>
    <option>medium</option>
    <option>large</option>
</select>

这里有一个问题：虽然盒子本身的样式正确，但是下拉列表本身没有应用样式。

第二版：

<div class="btn-group">
    <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select Business type <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">small</a></li>
        <li><a href="#">medium</a></li>
        <li><a href="#">large</a></li>
    </ul>
</div>

这个看起来不错：

但它是一个按钮。当选择一个选项时，我不想执行任何动作，我想要的是更改文本，并将选择与相应的输入字段绑定。

这两种方法都是接口对我的行为是错误的选择。我拒绝相信Bootstrap不包含绑定到输入字段的简单下拉单选组件。

我失踪了什么请帮忙。

解决方法

如果你想实现 this只要把你的下拉按钮和样式像选择框一样。代码为 here及以下。

.btn {
    cursor: default;
    background-color: #FFF;
    border-radius: 4px;
    text-align: left;
}

.caret {
    position: absolute;
    right: 16px;
    top: 16px;
}

.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default {
    background-color: #FFF;    
}

.btn-group.open .dropdown-toggle {
    box-shadow: 0 1px 1px rgba(0,0.075) inset,0 0 8px rgba(102,175,233,0.6)
}

.btn-group {width: 100%}
.dropdown-menu {width: 100%;}

要使按钮工作像一个选择框，所有你需要添加的是这个微小的JavaScript代码：

$('.dropdown-menu a').on('click',function(){    
    $('.dropdown-toggle').html($(this).html() + '<span class="caret"></span>');    
})

如果您有这样的multiple自定义下拉列表，您可以使用此JavaScript代码：

$('.dropdown-menu a').on('click',function(){    
    $(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');    
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!