标签: bootstrap-multiselect

我正在使用bootstrap-multiselect并且需要提交带有选定选项的表单。

但是在表单提交时，url 会变成这样，....&sites=1&sites=2&sites=3而我需要它...&sites=1,2,3

这是我的代码：

<select id="sites" name="sites" class="form-control" multiple="multiple">
    <option value="1">Site 1</option>
    <option value="2">Site 2</option>
    <option value="3">Site 3</option>
</select>

JS：

$('button[type=submit]').click(function () {

      var text = $('#sites').val()
      //I have the list in `text` as 1,2,3 which need to in url
      //do the rest and continue submit

如何在 url 中发布这些选定的值（即url/sites=1,2,3代替url/sites=1&sites=2&sites=3）

谢谢你的帮助！

I am having issues when trying to select the element which contains all the selected values.

For example: if you select by id such as 

$('#campaign-select').multiselect('refresh'),

它没有做任何事情。这是为什么？

请参阅jsFiddle

修复！

$('#filter-reset-btn').on('click', function () {

               $('#campaigns-select').multiselect('rebuild');
               /* resetting the select element to refresh*/
               $('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select option:selected').each(function () {

                   $(this).prop('selected', false);

               })

               $('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select').val([]).multiselect('refresh')



           });

这里更新为jsFiddle

我multiselect在我的应用程序中使用了这个下拉菜单，这是它的 lib 链接

如果我使用这个multiselect下拉菜单，我可以获得所有功能， 但我面临设计问题。

我想设计如下图所示的复选框：

<select id="p1" multiple="multiple">
  <option  value="Bootstrap">Bootstrap Tips</option>
  <option value="HTML">HTML</option>
  <option value="CSS">CSS tricks</option>
  <option value="angular">Angular JS</option>
</select>

我尝试使用内联 css 来选择更改复选框和文本的颜色，但它不起作用。任何帮助都非常有帮助

<select id="p1" multiple="multiple">
  <option  value="Bootstrap">Bootstrap Tips</option>
  <option value="HTML">HTML</option>
  <option value="CSS">CSS tricks</option>
  <option value="angular">Angular JS</option>
</select>

$(document).ready(function() {
  $('#p1').multiselect();
});

我的webpack配置指定了要构建的许多节点模块vendors.js.所有模块都安装npm在父文件夹中并驻留在父文件夹中node_modules.

文件夹结构:

app/scripts/a.js
node_modules/bootstrap-multiselect
webpack.config.js

来自webpack.config.js的片段:

entry: {
  vendors: ['jquery', 'bootstrap', 'bootstrap-multiselect']
}

这适用于'jquery'和'bootstrap',但不适用于'bootstrap-multiselect':

ERROR in multi vendors
Module not found: Error: Cannot resolve module 'bootstrap-multiselect' 
in /home/user/app

似乎webpack正在查找错误的node_modules文件夹.它看起来似乎是应用程序文件夹的根目录,但那为什么它仍然会找到其他模块？所以我添加了resolve和的每个变体resolveLoader,

resolveLoader: {root: path.join(__dirname, 'node_modules')};
resolve: {root: [path.join __dirname, 'node_modules']};

仍然没有运气......

我想编写 JQuery 代码，从 Bootstrap Multi select 中取消选中和取消选择某些选项。

例如，如果多选是选择并选中以下值：

我想要一个将输出以下内容的 JQuery

我做了以下无效的 JQuery：

    $('#example-optionClass').val('1').prop('checked', flase);
    $('#example-optionClass').val('4').prop('checked', flase);
    $('#example-optionClass').val('2').prop('checked', true);
    $('#example-optionClass').val('6').prop('checked', true);

这里的源代码：

    $('#example-optionClass').val('1').prop('checked', flase);
    $('#example-optionClass').val('4').prop('checked', flase);
    $('#example-optionClass').val('2').prop('checked', true);
    $('#example-optionClass').val('6').prop('checked', true);

请帮忙。谢谢

David Stutz使用Bootstrap和jQuery创建了一个包含多选项列表的插件.

资源:

Github上的消息来源

文档和示例

它适用于谷歌Chrome,Mozilla Firefox或我测试过的任何其他现代浏览器.

我的问题是IE,特别是版本9.0.8112.我正在尝试布置几个多选控件,一个在另一个之下.

您可以在下面的快照中注意到IE隐藏了一个扩展列表,位于其下方的多选控件后面.

HTML代码如下:

    <div id="filters_inner">
        Year:
        <select id="example6" class='multiselect_filter' multiple="multiple">
        <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
        </select>
        <br/>Quarter:
        <select id="Select1" class='multiselect_filter' multiple="multiple">
        <option value="1">Q1</option>
            <option value="2">Q2</option>
            <option value="3">Q3</option>
            <option value="4">Q4</option>
    </select>
    </div>

JS代码:

    $(document).ready(function () {
        $('.multiselect_filter').multiselect({
            numberDisplayed: 1
        });
    });

小的CSS修改(我已经证实那些不是原因):

.btn-group button {
    padding: 1px 3px 1px 3px;
    font-family: Verdana;
    font-size: 11px;
    color: #333333;
    text-align: left;
}
select {
    text-align: left;
}

我很想知道有没有人知道如何在IE 9上解决这个问题.

我有一个带有选择选项标签的简单表单，我正在尝试使用引导程序多选来设置它的样式。不幸的是，似乎没有加载引导程序多选或其他东西......我得到的只是经典的 html 选择多选框......

这是我的代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="CSS/main.css" rel="stylesheet" type="text/css" />
<link href="CSS/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<link href="CSS/bootstrap-3.3.2.min.css" rel="stylesheet" type="text/css" />
<link href="CSS/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="CSS/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="JS/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="JS/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="JS/bootstrap-3.3.2.min.js"></script> 
<script type="text/javascript" src="JS/prettify.js"></script> 
<script type="text/javascript" src="JS/main.js"></script> 

</head>

<body>

<div>

<form id="tablefilterselect"  method="POST" action="http://localhost/admincrud/php/tablefilterview.php">
<br><br><br>
Select columns: <br><br>

<select class="multiselect" name = "coloaneselect" multiple="multiple" >
 <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option> …

我正在使用http://davidstutz.github.io/bootstrap-multiselect/提供的bootstrap multiselect插件。我将鼠标悬停在具有所有选定值的工具提示上时遇到问题。它显示出意外的结果，如给定的图像。tootip意外的结果 我想删除工具提示我也曾尝试禁用按钮标题属性，该值在工具提示中显示。但这不起作用。我当前的代码是这样的。
当前带有PHP代码的HTML：

<select class="form-control" multiple name="speciality[]" id="speciality">
<?php if($data=$user->getAllSpecialities()){
    foreach($data as $key => $value) {?>
        <option selected value="<?php echo $value['speciality_id'];?>">
                <?php echo $value['speciality_title'];?> 
        </option>
    <?php }
 }?>
</select>

具有多选初始化的jQuery：

$('#speciality').multiselect({
    nonSelectedText: 'Select Speciality',
    numberDisplayed: 2,
    buttonClass: 'btn btn-default',
    buttonWidth: '100%',
    includeSelectAllOption: true,
    allSelectedText:'All',              
    selectAllValue: 0,
    selectAllNumber: false,
    maxHeight: 100,
    onSelectAll: function() {
        $('button[class="multiselect"]').attr('title',false);
    }
});
//$('#speciality').tooltip().attr('title', 'all specialities');

我想在多选下拉列表中获取所选选项的值.但是我没有完成这件事ngModel..

这里的html:

 <div class="col-xs-offset-1 col-xs-3">
    <form class="btn-group" id="select-form">
        <select id="dropdown-list" multiple="multiple" [(ngModel)]="selectedObject"></select>
       <button type="reset" id="reset-button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span></button>
    </form>
</div>

这里是for循环,它将选项附加到选择:

ngOnInit() {
    for(var i = 0; i < this.checks.length; i++){
        var append = this.checks[i];
        $('#dropdown-list').append('<option>'+ append.name +'</option>');
    }

这是因为ngFor这里不起作用..但在这种情况下,这不是我的问题.

有人可以帮我记录所选的 options = [(ngModel)]="selectObject"

我有一个包含两个 Bootstrap 多选下拉列表的页面。它们正在被正确创建和渲染。（也就是说，我看到的是一个下拉列表，而不是一个常规的选择列表。）但是当我点击它们时，下拉列表不会打开。

在这里发帖，我已经大大简化了。（我实际上是用 PHP 代码生成选项。但即便如此，调试器仍向我显示选项存在。）我确定我在这里一定遗漏了一些简单的东西，因为我已经在另一个站点上使用了它，并且代码似乎完全类似。

HTML：

        <select id="confs" multiple="multiple">
        <option value='First' id='1'>First</option>
        <option value='Second' id='2'>Second</option>   
        </select>

Javascript（我在这里包括了整个 Ready 函数，以确保那里没有问题）：

<script type="text/javascript">
$(document).ready(function(){
$("#papers").tablesorter();  
$('#confs').multiselect({
    includeSelectAllOption: true,
    onChange: function(option, checked) {           
        updatePapers();         
    }
});
$('#cats').multiselect({
    includeSelectAllOption: true,
    onChange: function(option, checked) {           
        updatePapers();         
    }
});
})
</script>

不知道它是否重要，但是这个站点与我使用它的站点之间的最大区别在于，该站点具有 Windows 主机，而另一个是 Linux。

更新：我创建了一个更简单的测试页面，其中仅包含单个 Bootstrap 多选。我添加了 onDropdownShow 代码，以显示警报。警报出现，但下拉菜单没有下降。这是准备功能的新版本：

$(document).ready(function(){   
$('#confs').multiselect({
    includeSelectAllOption: true,
    onDropdownShow: function(event) {
        alert('Dropdown shown.');
    }
});
});