标签: bootstrap-select

当我尝试在网站上放置多个选项(超过20个)时,它会减慢jquery执行速度(使用停止/继续警报) - 是否有机会优化代码以加快速度 - 加载需要几分钟？

示例代码

<td><select class="selectpicker" name="ref[240][sub_class]">
<option value=0 selected="selected" >A</option>
<option value=1>B</option></select></td>
<td><select class="selectpicker" name="ref[265][sub_class]">
<option value=0>A</option>
<option value=1 selected="selected" >B</option></select></td>

文件末尾的javascript:

        $(document).ready(function() {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 1
  });
});

我正在使用引导程序选择插件（http://silviomoreto.github.io/）并且我正在处理更改事件“changed.bs.select”以捕获任何选择更改。根据https://silviomoreto.github.io/bootstrap-select/options/ 上的文档，“此事件在选择的值更改后触发。它通过事件、clickedIndex、newValue、oldValue。”

我想了解 newValue 和 oldValue 究竟代表什么。因为总是出现新值为真而旧值为假的情况。

这是一个小提琴来说明我的观点。

https://jsfiddle.net/muojdbh9/

HTML

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

<div class="res">
Waiting for a change event
</div>

jQuery

$(".selectpicker").on('changed.bs.select', function (event, clickedIndex, newValue, oldValue) {
    $("div.res").html("newValue: " + newValue + "<BR>oldValue: " + oldValue);
});

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

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

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

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

我在下拉框中使用了Bootstrap select（https://silviomoreto.github.io/bootstrap-select/）。

<select id="dataBox" name="dataBox" title="Select data" class="selectpicker form-control"></select> 

但是，这里的问题是标题看起来与周围区域输入框中的占位符略有不同（字体和颜色）。如下图所示。无论如何，有没有格式化标题而不是占位符的格式？

这是一个标题

这是一个占位符

我尝试对公司进行选择以添加到组中，然后在数据库中进行连接。我有点被“html”代码阻止了。我在 Laravel 工作

<select id="selectCmp" class="selectpicker" data-live-search="true" multiple title="Select structures">
    @foreach($allCompanies as $company)
        <option value="{{$company->id}}"> {{$company->name}}</option>
    @endforeach
</select>

<iframe name="votar" style="display:none;"></iframe>

<form action={{route('admin.group.affect')}} method="POST" target = "votar">
    {{csrf_field()}}
    <div id="cmpInputList">

    </div>
    </br>
    <button id="addGroupeBtn" class="btn btn-secondary" type="submit">
        Add
    </button>
</form>

好的，如果尝试检查元素，我有类似的东西：

<div class="btn-group bootstrap-select show-tick dropup">
    <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button"
            data-id="selectCmp" title="Select structures" aria-expanded="true"><span
            class="filter-option pull-left"> Select structures</span>&nbsp;<span class="bs-caret"><span
            class="caret"></span></span></button>
    <div class="dropdown-menu open" role="combobox" style="max-height: 560px; overflow: hidden; min-height: 142px;">
        <div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off" role="textbox"
                                         aria-label="Search"></div> …

我正在尝试将引导选择类设置为我的选择字段。但是，我收到“类型错误：init () 得到了意外的关键字参数“attrs”。

class constraintListForm1(forms.Form):

    region = forms.ChoiceField(choices=REGION, required=True)   
    operator = forms.ChoiceField(choices=OPERATOR, required=True )

    class META:
        model = constraintListModel1  


        widgets = {
            'region': forms.ChoiceField(attrs={'class' : 'bootstrap-select'}),


            }

我用过引导选择

现在，当我点击一个选项时，它应该被选中，因为它工作正常，但是当我点击同一个选项时，它应该同时被取消选择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>

我想为 angular 5 应用程序安装npm bootstrap-select所以我使用 npm 安装了它

npm install bootstrap-select

然后我安装了所需的依赖项：

npm install jquery
npm install popper.js --save

角度cli.json：

 "apps": [
    {
      "styles": [
        "styles.css"
      ],
      "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ],
    }
  ],

我的 package.json 是（我从列表中删除了一些包）：

"dependencies": { 
    (...)
    "@ng-bootstrap/ng-bootstrap": "^1.1.0",
    "bootstrap": "^4.1.1",
    "bootstrap-select": "^1.13.2",
    "jquery": "^3.3.1",
    "ng-multiselect-dropdown": "^0.2.1",
    "popper.js": "^1.14.4",
}

在 html 文件中，我添加了代码：

<ng-template #modalWindow let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Options</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">     
    <select id="myspID" #selectPickerRef class="selectpicker …

这是我尝试的例子,但没有奏效.

的jsfiddle

我期望:在按钮上单击所有选项将被取消选中.

我尝试"刷新"和"渲染"但也没有帮助.

 <select class="selectpicker" multiple title="Not changable text" data-count-selected-text="Not changable text">
         <option>Mustard</option>
         <option>Ketchup</option>
         <option>Relish</option>
 </select>

<button id="f1">ggg</button>

$('#f1').click(function(){
   $('.selectpicker').selectpicker('deselectAll');
});

更新:如果选择关闭,代码将不起作用.万一它是开放的 - 一切都很好

我很难将数据属性设置为 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")); 
});

数据属性总是返回未定义

我在这里做错了什么？