标签: bootstrap-selectpicker

我想以编程方式更改我的Bootstrap选择selectpicker的标题。

我尝试了以下不起作用的JS代码。

$('#myPicker')
    .selectpicker({title: 'New title'})
    .selectpicker('render');

还有其他方法可以做到这一点吗？

我有一个引导选择器：

<div id="maindiv">
  <div class="hidden">
     <select class="form-control selectpicker communitySelect " multiple="true">
        <option selected value="0">All Communities</option>
     </select>
  </div>
</div>

我尝试克隆此隐藏的div，并尝试在克隆的div中添加/删除selectpicker选项：

 var $pickerdiv = $("div.hidden").clone();
 $pickerdiv.removeClass("hidden");
 $("#maindiv").append($pickerdiv);

 var $communitySelector = $pickerdiv.find(".selectpicker");
 $communitySelector.selectpicker();
 $communitySelector.find('option').remove();
 $communitySelector.selectpicker('refresh');

但是在执行selectpicker刷新方法后，它会在UI上重复：https：//jsfiddle.net/v660Lb4p/8/

那么如何解决呢？

已解决： Bootstrap selectpicker插件自动应用于具有selectpicker类的元素。因此，我删除了该课程，并且...现在可以正常工作！ https://jsfiddle.net/v660Lb4p/16/

我正在使用Bootstrap-Select:

<select name="SelectAddress" class="selectpicker">
   <option value="a">Val 1</option>
   <option value="b">Val 2</option>
   <option value="c">Val 3</option>
   <option value="d">Val 4</option>
</select>

例如,我想Val 1改为Val 1.0知道Val 1被选中.所以我尝试没有成功:

$("select[name=SelectAddress]").text("Val 1.0");
$("select[name=SelectAddress]").selectpicker("refresh");

我怎样才能做到这一点？

编辑:

找到一个解决方案,在每个上面插入一个ID <option>:

<select name="SelectAddress" class="selectpicker">
   <option id="1" value="a">Val 1</option>
   <option id="2" value="b">Val 2</option>
   <option id="3" value="c">Val 3</option>
   <option id="4" value="d">Val 4</option>
</select>

然后:

$("#1").html("Val 1.0");
$("select[name=SelectAddress]").selectpicker("refresh");

我很难将数据属性设置为 bootstrap selectpicker 上的 select 选项。

我试过：

$('.selectpicker').on('changed.bs.select', function (e) {
    var selected = e.target.value;
    console.log("value :  ", selected ); // gives selected value
    console.log("data attribute:  ", $(e.target).data("price")); 
});

数据属性总是返回未定义

我在这里做错了什么？

是否可以在多选选择器中将选定文本格式“静态”与选定文本格式“计数”一起使用？

这是我当前的选择器：

<select id=“postcodeSelect" class="selectpicker" title="Postcode" data-size="5" data-live-search="true" multiple data-selected-text-format="static">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

现在无论选择什么，它总是显示“邮政编码”，但如果选择了 3 个邮政编码，我希望它显示“邮政编码（选择 3 个项目）”。

我正在使用bootstrap-select。

select如果我在使用 的搜索菜单中找不到新选项data-live-search="true"，因为它还不存在，我该如何添加新选项？

您如何限制选择中包含的选项数量？我有大约 2000 个选项（我使用 data-live-search 以便于搜索），但我不想列一个很长的列表（出于审美目的）。

I use the bootstrap-select picker to select picker option. When I scroll the container, drop-down struct with the top bar.it doesn't properly follow the parent element.

please check the codepen for it: https://codepen.io/Arunkarthik07/pen/bjOLYV

    .container{ 
      height: auto;
      overflow-y: scroll;
    } 

    <div>
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
    <div class="container">
     
    <select class="selectpicker">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Barbecue</option>
        <option>Mustard</option>
      <option>Ketchup</option>
      <option>Barbecue</option>
    </select>  
          
    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td> …

为什么Bootstrap-select不能正常使用Bootstrap 4？这是代码，它将搜索输入按钮和选项分别显示为两个单独的按钮。

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

我计划实现一个选择器，它将允许用户从下拉列表中选择多个选项。问题是，当我的后端从这个选择器中提取值时，这些值必须按照用户选择的顺序，而不是原始下拉列表的顺序。希望能得到一些帮助！预先非常感谢！

我正在使用 django（前端）和 Flask（后端）开发这个

计划使用我的 DataFrame 中的值填充选择器

假设选择器中的选项顺序如下：

1. A
2. 乙
3. C
4. D

因此，当用户按以下顺序选择选项时，D、A、C

从此选择器元素中提取期望值：D、A、C

从该 selectpicker 元素中提取不需要的值：A、C、D

简单的问题。我的选择下拉菜单是这样的：

<select class="selectpicker" multiple data-container="body" data-title="Options" data-size="10" data-width="100%" data-selectedTextFormat="static" >  
    <option value="default">Test</option>
</select>

我希望无论选择什么，都保留该标题（“选项”）。即使我这样做：

$('.selectpicker').selectpicker('val', "default");

我希望它保留标题“选项”。正如您所看到的，我尝试了 anddata-title属性data-selectedTextFormat，但它不起作用。

我想在 Blazor 服务器应用程序中使用 Bootstrap-select，我执行了从 Bootstrap-select 网站（https://developer.snapappointments.com/bootstrap-select/）到我的 blazor 服务器应用程序的所有步骤，并安装了 bootstrap-select 包NuGet 包管理器，但选择元素没有效果。是否可以在 blazor 应用程序中使用 Bootstrap-select。如果有人提供帮助，我将非常感激。

这是我的剃须刀组件：

@page "/"

    <select class="selectpicker" data-live-search="true">
      <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
      <option data-tokens="mustard">Burger, Shake and a Smile</option>
      <option data-tokens="frosting">Sugar, Spice and all things nice</option>
    </select>

我正在使用下面的代码，我的问题是当我第一次选择时，位置列表没有加载。当我选择第二个项目时，子列表中的第一个项目被填充。如果我选择第三个，则填充第二个子项。

我确定我在某个地方犯了一个愚蠢的错误。

<div class="form-group">
  <div class="row">
    <div class="col-xs-12 col-sm-5 col-md-5">
      <label for="">SELECT CLIENT</label>
      <select type="search" id="myarray" class="select2-select req selectpicker form-control" data-required="1" data-max-options="1" data-live-search="true" multiple="" name="myarray[]" title="Select a Client">
        <?php echo $Clients; ?>
      </select>
    </div>
  </div>
</div>

<script>
  jQuery(".select2-select").change(function() {
    var selected = $(this).val();
    $(".selectpicker").selectpicker();
    $.ajax({
      url: "<?php echo base_url(); ?>login/getDataFromLocation",
      data: {
        type: 'select',
        selected: selected
      },
      type: 'post',
      success: function(output) {
        if (output) {
          //$('#append').append(output);
          $(".selectpicker").selectpicker();
          $('#multiple').selectpicker('refresh').empty().append(output);
        }
      }
    });

  });
</script>

<div class="form-group">
  <div class="row">
    <div class="form-group col-md-5"> …