标签: bootstrap-select

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

如果使用bootstrap和生成表单bootstrap-select:

<form action="handle.php" method="post">
    <select name="pids" class="selectpicker" multiple>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="6">C</option>
    </select>
</form>

并且一个选择所有或多个项目,只有具有最后选择的项目value被发布到handle.php页面.

handle.php

<?php
var_dump($_POST);
?>

结果:

array(1) { ["pids"]=> string(1) "6" } 

如何检索所有选定的项目？

我使用Bootstrap按钮下拉列表来显示表单.我通过调用禁用了下拉消息(当用户操作表单时)stopPropagation.表单的一个元素是下拉列表.如果我使用本机html选择元素一切都很好(除了看起来很难看).如果我用bootstrap-select(它模仿由div选择)替换它,我就无法选择一个值(因为按钮下拉列表中没有足够的位置).我尝试应用一种解决方法来指定container: 'body'bootstrap-select.它有助于查看下拉列表值,但是当我选择元素时按钮下拉列表关闭(我猜它会发生,因为boostrap-select属于body,它高于按钮下拉列表,应用了点击传播).

            <div class="btn-group">
                <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
                    Take <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <form>    
                            <select id="mySelect" class="selectPicker">
                              <option>1</option>
                            </select>
                        </form>
                    </li>
                </ul>
            </div>

<script type="text/javascript">
  $('.dropdown-menu').click(function(e) {
                e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
            });

  $('.selectpicker').selectpicker({container: 'body'});
</script>

在Bootstrap-Select中,如何防止第一个选定项目显示在标题中.或者,如何从下拉选项列表中隐藏空的第一项

在HTML中,该<select>元素将<option>默认自动选择第一个元素.典型的方法是创建一个空白的第一行,但这看起来很奇怪,作为bootstrap select公开的下拉菜单的一部分.

这是我的两个选择:

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

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

但看起来都不是很好.第一个title完全忽略属性,第二个有一个空白区域,在下拉菜单上看起来很奇怪:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

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

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

我有一个选择框,当我选择该选项时,它会使用选择框的值更新输入框.这适用于旧版本的Bootstrap-Select.但在较新的版本中,它不再起作用了.我正在寻找一种方法,使其在较新的版本中工作.谢谢.

• 旧版(工作):http://jsfiddle.net/u967uwtf/
• 较新版本(不工作):http://jsfiddle.net/9nzcLar6/

HTML:

<select class="selectpicker Categoria" multiple="">
  <option selected>A1</option>
  <option selected>A2</option>
  <option>A3</option>
  <option>A4</option>
</select>
<input type="text" class="ChangeCategory" name="ChangeCategory">

JS:

$('select').selectpicker();

$(".Categoria").change(function() {
  f2();
});

var f2 = function(){
  $('.ChangeCategory').val($(".Categoria").val());
}
f2();

在我之前的问题中,我在讨论bootstrap select插件,其中destroy方法正在做我不想要的事情.我手动编辑插件,但这不是一个好习惯.

Bootstrap select destroy从DOM中删除原始选择

我想用自定义方法扩展插件,以便它可以完成我想要的扫描.

我用以下方法扩展插件:

$.extend(true, $.fn.selectpicker.prototype, {
    customRemove: function () {
        this.$newElement.remove();
        this.$element.show();
    }
});

它位于bootstrap select脚本文件下的另一个js文件中.

我该如何称呼这种新方法？我尝试了以下但没有成功:

$('select#begin' + _week + _day).selectpicker("customRemove");

要么

$('select#begin' + _week + _day).selectpicker().customRemove();

我错过了什么吗？

bootstrap select插件中destroy函数的原始方法:

remove: function () {
  this.$newElement.remove();
  this.$element.show();
}

如果我的值是1,3,4,使用jQuery,如何在Bootstrap- select中动态选择多个值？

这是我的选择:

 <select  id="myselect" name="myselect[]" multiple>
        <option value=""></option>
        <option value="1">red</option>
        <option value="2">orange</option>
        <option value="3">green</option>
        <option value="4">blue</option>
</select>

将bootstrap-select.js与Laravel Form外观结合使用时,不会传输任何值.dd()说空

{!! Form::select('user', $users, null, array('class' => 'selectpicker show-tick', 'data-live-search' => 'true', 'id' => 'user_select')) !!}

但是当使用没有bootstrap的表单Facade时 - 选择如下:

{!! Form::select('user', $users, null) !!}

有用.

dd() 说1

我已经在 angular 5 中使用 bootstrap-select 实现了选择框。我使用了最新版本的 Bootstrap select 来使其在 angular 5 中工作。但它抛出以下错误。

bootstrap-select.js:1904 未捕获的类型错误：无法设置未定义的属性“_menu”

<form>
     <select class="selectpicker" data-live-search="true">
         <option>Mustard</option>
         <option>Ketchup</option>
         <option>Relish</option>
     </select>
</form>

查看 Plunkr

我想使用“bootstrap-select”创建一个简单的选择选项。我正在使用 bootstrap-select 创建我的选择器。

我在控制台中看到此错误

<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n<head>\n    <meta charset="utf-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.rtl.min.css">\n    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">\n    <title>\xd9\x85\xd8\xaf\xdb\x8c\xd8\xb1\xdb\x8c\xd8\xaa</title>\n    <style>\n        * {\n            font-family: Tahoma;\n        }\n    </style>\n</head>\n<body>\n<div class="container mt-5">\n    <div class="row">\n        <div class="col-lg-6">\n            <div class="form-group">\n                <label for="lang">\xd8\xb2\xd8\xa8\xd8\xa7\xd9\x86</label>\n                <select id="lang" name="lang" class="form-control">\n                    <option value="1">\xd9\x81\xd8\xa7\xd8\xb1\xd8\xb3\xdb\x8c</option>\n                    <option value="2">\xd8\xb9\xd8\xb1\xd8\xa8\xdb\x8c</option>\n                    <option value="3">\xd8\xa7\xd9\x86\xda\xaf\xd9\x84\xdb\x8c\xd8\xb3\xdb\x8c</option>\n                </select>\n            </div>\n        </div>\n    </div>\n</div>\n<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>\n<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"\n<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>\n<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>\n<script>\n    $(\'#lang\').selectpicker();\n</script>\n</body>\n</html>\n

我怎样才能实现这个目标？