标签: bootstrap-multiselect

我正在使用bootstrap-multiselect作为我的应用程序中的下拉列表.除了我的表单重置,当我希望它恢复到最初选择的值时,一切正常.它在关闭时显示菜单中预期的选定值(即创建一个包含多个选项的列表),但是当我打开菜单时,不会检查所选项目的复选框.

我试过以下无济于事:

$("#MyMenu").multiselect('refresh');
$("#MyMenu").multiselect('rebuild');
$("#MyMenu").multiselect('destroy');

其次是

$("#MyMenu").multiselect();

任何帮助表示赞赏!

我用过Bootstrap的Multiselect。

我的问题是当我从选项中选择项目时。如果名称太长，则按钮宽度也会增加。

选择选项后如何处理按钮宽度。

我正在使用Bootstrap Multiselect,这是我在HTML中的设置:

<div class="form-group">
    <select class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %}
        <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %}
    </select>
</div>

我想使用我的查询的选定值,我的Ajax代码的片段:

$.ajax({
    url: "cnt_bldg/",
    type: "GET",
    dataType: "JSON",
    data: {
        'brgy_id': brgy_id,
        'bldg_type': $('#bldg_type option:selected').val()
    },
    ...

问题$('#bldg_type option:selected').val()是我只能获得1个值.例如,我检查Market并Police Station在我的选择选项中,并在我的控制台中查看http://127.0.0.1:8000/cnt_bldg/?brgy_id=All&bldg_type=Market".它只获得Market.

如何获取所有值并将其用于查询？

顺便说一下,我正在使用Django.我已经阅读了这个答案,但我不知道如何在上面的AJAX代码中使用结果.

尽管我可以在独立文件中使这个bootstrap-multiselect工作,但是一旦我点击插入符号,我就无法看到下拉列表,即使我将它包含在门户文件中.

我已经使用了bootstrap-datepicker,datetimepicker,selected和backbone.js

这是应该做的技巧

$('.insightList').multiselect({
            selectAllText: true
});

有没有人知道不为'btn-group'添加'open'类的原因是什么？

![点击也只有btn-group类为div是否应该添加开放类] [1]在此先感谢

非常简单的例子：https : //jsfiddle.net/x6z6w0n8/8/

如何在不创建重复项的情况下在初始化步骤中设置选定的值？

来自异地的样品效果很好。https://jsbin.com/yupinelefa/edit?html,js,console

正如我注意到的，在例外他们不初始化选择，他们只是使用 event onInitialized。但是当我初始化（设置选项）以在onInitialized事件中选择时，没有任何改变，我也有 2 个选择。

一般来说 - 我bootstrap-multiselect在页面上。OnInitialization 我想在其中设置选定的值。我有下一个代码作为示例：

<select id="example-onInitialized" multiple="multiple" class="multiple">
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
     <option value="4">Option 4</option>
     <option value="5">Option 5</option>
     <option value="6">Option 6</option>
</select>

$('.multiselect').multiselect({
            onInitialized: function(select, container) {
               $(select).multiselect('select', 2); // I want to select item with value '2'
         }
});

但是这个脚本创建了一个额外的选择。因此，我有一个选择值为“2”的选择和一个空选择。对我来说，似乎每次调用.multiselect()都会创建新的选择。这样对吗？谢谢。

我正在使用Bootstrap-Multiselect(http://davidstutz.github.io/bootstrap-multiselect/)

我有两个下拉列表,当在一个下拉列表中选择一个项目时,我需要重置另一个下拉列表.我一直试图使用onchange jQuery做到这一点,但没有成功.

如果从dropdown1中选择了一个选项,则取消选择/重置dropdown2中的所有内容.

<form>
    <select id="dropdown1" name="dropdown1" multiple="multiple">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>

如果从dropdown2中选择了一个选项,则取消选择/重置dropdown1中的所有内容.

    <select id="dropdown2" name="dropdown2" multiple="multiple">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</form>

我失败的jQuery

$("#dropdown1").change(function () {
    $('#dropdown2').multiselect('refresh');
});

$("#dropdown2").change(function () {
    $('#dropdown1').multiselect('refresh');
});

该如何实现？

我正在尝试使用bootstrap-multiselect与Aurelia合作.让它工作或多或少,但不确定它是最好的解决方案,还是我可能遇到麻烦.

Bootstrap-multiselect是一个jquery插件,可以将正常的select(multi)转换为带有复选框的下拉列表(http://davidstutz.github.io/bootstrap-multiselect/)

我的第一个问题是让它使用动态创建的选项.当我的选项数组(作为可绑定属性创建)发生更改时,我通过使用插件"rebuild"功能解决了这个问题.然而原始选择的选项还没有创建,所以我使用setTimeout来延迟重建,所以Aurelia重建了选择.感觉就像一个"肮脏"的解决方案,我对Aurelia的生活方式知之甚少,以确保它始终有效.

第二个问题是组件的值不会更新,但更改方法将触发.我通过触发更改事件解决了这个问题(找到了一些其他插件的例子).工作正常,价值将被更新,但更改方法将触发两次.这不是一个大问题,但如果更改会耗费一些时间(例如从数据库中获取数据等),则可能会出现问题.

有什么改进代码的建议吗？

       <template>
          <select value.bind="value" multiple="multiple">
              <option repeat.for="option of options"Value.bind="option.value">${option.label}</option>
           </select>
       </template>

import {customElement, bindable, inject} from 'aurelia-framework';
import 'jquery';
import 'bootstrap';
import 'davidstutz/bootstrap-multiselect';

@inject(Element)
export class MultiSelect {

    @bindable value: any;
    @bindable options: {};
    @bindable config: {};

    constructor(private element) {
        this.element = element;
    }

    optionsChanged(newVal: any, oldVal: any) {
        setTimeout(this.rebuild, 0);
    }

    attached() {
        var selElement = $(this.element).find('select');
        selElement.multiselect(
            {
                includeSelectAllOption: true,
                selectAllText: "(All)",
                selectAllNumber: false,
                numberDisplayed: 1,
                buttonWidth: "100%"

            })
           .on('change', (event) => …

我正在使用bootstrap-multiselect为用户提供两个关键菜单上的出色控制器。我的第一个菜单被称为groups和其他被称为queues. 队列中的每个选项都有一个 HTML5 数据属性（即 data-group="X"，其中 X 是组值）

当用户从groups菜单中选择一个选项/组时，我想查找并隐藏queues菜单中data-group不等于组菜单中选定组的每个队列/选项。

在确定需要隐藏/显示的队列/项目后，我尝试使用.show()和.hide()扩展。然后我尝试使用.addClass('hidden')和.removeClass('hidden')方法，但没有什么对我有用。

如何使用bootstrap-multiselect 动态显示/隐藏项目？

这是我的代码

$(function () {
    var queueGroupIds = $('#QueueGroupIds');
    var queueIds = $('#QueueIds');

    queueGroupIds.multiselect({
        nonSelectedText: 'Select group(s)',
        onChange: function (option, checked, select) {
            var groups = queueGroupIds.find('option:selected');

            if (groups.length == 0) {
                //When none of the groups are selected, show all queues!
                queueIds.find('option').each(function (i, q) {
                    $(q).show();
                }); …

这个问题可能会被问到，但这并不能解决我的问题multi-select。

在我的angular项目中drop-down，密钥包含database,desktop和account。基于drop-down键的值multi-selectordrop-down和inputbox将被更改。

https://stackblitz.com/edit/angular-ivy-kioexw

我的问题：当我点击第一列作为database它显示multi-select，但在相同的第1行，如果我选择desktop是database multi-select不墙根。请检查下图。

app.component.ts

import { Component, VERSION } from '@angular/core';
declare var $: any;
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
rowArray: Array<any> = [];
  newRowArray: any = {};
  dbValue = ["mysql", "oracle", "mongo"];
  desktopValue = [
    { id: "1", name: "dell" …

我想在用户关闭由" bootstrap-multiselect "UI 控制的下拉菜单时重新加载页面.

这是我到目前为止所尝试的

    $('#ts_client_id').multiselect({
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        selectedClass: null,
        nonSelectedText: 'All Clients',
        includeSelectAllOption: true,
        buttonWidth: '100%',
        maxHeight: 250
    }).on('blur', function () {
        console.log($('#ts_client_id').val());
        window.location.reload();
    });

也

$('#ts_client_id').multiselect({
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    selectedClass: null,
    nonSelectedText: 'All Clients',
    includeSelectAllOption: true,
    buttonWidth: '100%',
    maxHeight: 250
}).on('hide.bs.dropdown', function () {
    console.log($('#ts_client_id').val());
    window.location.reload();
});

我也尝试了这个,它没有用

    $('#ts_client_id').multiselect({
        onDropdownHidden: function(event){
            console.log('hi');
            window.location.reload();
        },
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        selectedClass: null,
        nonSelectedText: 'All Clients',
        includeSelectAllOption: true,
        buttonWidth: '100%',
        maxHeight: 250
    });

这是我的HTML代码

<select name="ts_client_id[]" id="ts_client_id"  multiple="multiple" …