标签: bootstrap-selectpicker

我正在尝试创建一个下拉列表，当单击第一个列表项时，会打开一个与列表旁边所选项目相关的新项目列表，如下所示：

尝试为此使用 boostrap selectpicker，然后单击尝试添加另一个列表：

<select class="selectpicker" data-live-search="true">
            <optgroup label="Select Group 1">
                <option value="1">Option 1.1</option>
                <option value="2">Option 1.2</option>
                <option value="3">Option 1.3</option>
            </optgroup>
            
        </select>

并在 jquery 中单击尝试追加和刷新选择器。

       $(event.target)
           .append("<optgroup label="Select Group 2">
                <option value="4">Option 2.1</option>
                <option value="5">Option 2.2</option>
                <option value="6">Option 2.3</option>
            </optgroup>");
       $(dropdowmElem).selectpicker("refresh");

但不确定如何实现类似的布局，不是寻找类似的 css 样式，而是在现有列表旁边呈现另一个列表，有什么帮助/来源可以解决这个问题？

<select id="divRatings" class="selectpicker" multiple title='Choose one of the following...' data-size="5" data-selected-text-format="count>2">
                <option value="All" selected="selected">All Ratings</option>
                <option value="EC">EC (Early Childhood)</option>
                <option value="E">E (Everyone)</option>
                <option value="E10+">E10+ (Everyone 10+)</option>
                <option value="T">T (Teen)</option>
                <option value="M">M (Mature)</option>
                <option value="AO">AO (Adults Only)</option>
            </select>

在上面的html中有值的选项All.如果选择了该选项,我想选择所有项目,如果取消选择此选项,则取消选择全部.

我认为做起来很简单,但我无法理解为什么没有发生 $('#divRatings').change(function(){//some logic});

我选择/取消选择项目的功能:

  function toggleSelectAll(control) {
    if (control.val().indexOf("All,") > -1) {
        control.selectpicker('selectAll');
    } else {
        control.selectpicker('deselectAll');
    }
}

JSFiddle示例

我正在使用bootstrap-select表单.我在HTML文件的标题中包含脚本(jquery,bootstrap-select).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

所有具有"selectpicker"类的select元素都被正确调用.select元素的示例:

<select id="test" class="selectpicker">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
</select>

但是,如果我在同一页面上调用以下脚本

<script>
$(document).ready(
    function () {
        $('#test').selectpicker('val', 'Relish')
});
</script>

我得到了这个令人讨厌的错误

$(...).selectpicker不是一个函数

查看Google Chrome中的"来源"标签,我看到bootstrap-select.min.js已加载好.有人有建议吗？

我正在尝试使用带有“multiple”属性的 select 元素，但我希望它折叠起来，直到用户单击它。问题是 Bootstrap 5 不再支持 Bootstrap 4 及更早版本中使用的多重选择。曾经有一个名为“selectpicker”的 CSS 类在这些下拉列表中用于选择多个选项。有人有解决办法吗？我真正想要的只是选择菜单成为一个可以打开和关闭的下拉菜单，而不仅仅是一直打开。谢谢你！

当对<select>列表使用 bootstrap-select selectpicker 时，我遇到了两次触发 on change 事件的问题。

例如这里是我的选择列表

<select class="form-control selectpicker label-picker" data-style="btn-white" data-live-search="true" data-size="10">
    @foreach (var option in property.Options)
    {
        <option value="@option.Value">@option.Label</option>
    }
</select>

这是我的 Jquery 脚本

<script>
    $(document).on('change', '.label-picker', function (e) {
        debugger;
    })
</script>

每当我更改下拉菜单时，它都会触发我的脚本两次。当我selectpicker从我的选择中删除类时，它只会触发一次。但是，我喜欢这种风格和内置的搜索下拉菜单的能力，所以我更喜欢使用selectpicker.

我一直在检查我的代码，我只声明bootstrap-select.min.js一次。我正在动态添加这个选择列表，它是我 UI 中另一个操作的结果。我想知道这是否是问题的一部分，但我不确定为什么它只在引用 selectpicker 时出现问题。

任何建议都会有所帮助，因为我在这上面浪费了很多时间。

我的网站上有一个问题,选择选择器工作时间很长,但没有对代码进行任何更改,选择选择器停止工作.

错误是:

bootstrap-select.min.js:7未捕获TypeError:d.stopPropagation不是函数

我已经尝试更新库的版本,但我尝试的所有版本(1.10,1.7,1.6和1.5)看起来都有同样的问题.

你能告诉我一些有关正在发生的事情的想法吗？如果你能看到网站上的控制台会很棒.

我正在使用Bootstrap 4和Bootstrap Select版本1.13.2（最新），它应该支持Bootstrap4。如在文档中提到的，我什至通过以下方式手动指定了BS版本：

$.fn.selectpicker.Constructor.BootstrapVersion = '4';

我想在选择器旁边有一个图标，我使用了以下标记

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <i class="fa fa-user"></i>
      </div>
    </div>
    <select id="internal-select-picker" class="form-control selectpicker" data-live-search="true" data-size="10" multiple>
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
    </select>
  </div>                        
</div>

结果是这样，如您所见，图标比选择的图标稍大，我尝试将不同的bs样式应用于选择器和图标组，但没有任何效果

任何解决此问题的建议将不胜感激

我正在使用jQuery 数据表并应用单个列搜索（选择输入）。

在表页脚上，我有一个引导选择，我可以在其中选择多个选项并过滤我的数据。

它工作正常，但是当我选择选项时，我希望根据之前选择的选项更新其他选择。

因此，在我的示例中，如果我选择伦敦和纽约办公室，我只想以名义查看位于伦敦和纽约的人员，而不是所有选项。

我创建了一个事件draw，我将在其中循环遍历每一列并获取选定的选项，select.val()然后我使用，table.column(idx, {search:'applied'}).data().unique()但search:'applied数据表中的' 功能似乎不起作用。它给出的结果与我不应用搜索的结果相同。

请在我的演示下面找到详细说明。你能告诉我我的代码有什么问题吗？非常感谢。

$(document).ready(function() {

var table = $('#example').DataTable( {

initComplete: function () {

this.api().columns().every( function () {
//for each column I add bootstrap selectpicker to the footer
var column = this;
var select = $('<select class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () { 
//everytime the options …

我用过引导选择

现在，当我点击一个选项时，它应该被选中，因为它工作正常，但是当我点击同一个选项时，它应该同时被取消选择click和Enter按键事件它是如何在多个选择上工作的我只想以相同的方式进行单选选择。

我尝试了以下代码来选择和取消选择单击事件，它工作正常，但是当我尝试使用键盘执行此操作时，enter key它甚至没有被选中。

任何帮助表示赞赏:-)

$('.selectpicker').selectpicker({
    liveSearch:true,
    showTick:true
});

$(document).on('click', '.dropdown-menu li', function(event){ 
    if($(this).hasClass('active')){
 $(this).parent().prev('div').parent().next('select').selectpicker('val',''); } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"/>

<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

我正在尝试更改显示所选选项的 selectpicker 框的宽度，但无论我尝试什么，我都无法更改它，也无法更改框的颜色。

任何想法或建议表示赞赏。

我假设应该更改框宽度的代码片段如下（如您所见，我一直将其设置为 25，但宽度仍然很宽）：

.selectpicker {
width: 25px;

您可以运行的代码片段：

.selectpicker {
width: 25px;

<script>
  $(function() {
    $('[data-toggle="tooltip"]').tooltip()
  }) 
</script>

<script type = "text/javascript">
  $(window).on('load', function() {
      $('.selectpicker').selectpicker({
      'selectedText': 'cat'
      });
      // $('.selectpicker').selectpicker('hide');  
  }); 
</script>

.text-muted {
  font-size: small;
}

.text-bold {
  font-weight: bold;
  font-size: small;
}

.button {
  background-color: #008CBA;
  /* Light Blue */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 11px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  padding: 6px 10px;
}

.button2 …