标签: bootstrap-select
在bootstrap-select上显示/隐藏选项？
不久之前我试图在bootstrap-select lib上编写一个小片段,它应该打开并隐藏一些关于父选项的点击/更改事件的额外选项(在底部示例中为一半).
它应该如何工作......
当用户单击特定选项时,一些包含更多附加信息的额外项目将显示在父项下方.当用户再次单击时,应隐藏额外的项目,并从已选择的选项中清除子项目.
问题是什么？
不幸的是我的jquery水平并不高,所以在这一刻我只有/显示/功能没有/隐藏/子项和清除选中(如果选择了一些隐藏父项的子项).如果父项目上的选中箭头不显示,那么将会很好,仅限于孩子.
我的例子
这是我的简短代码 -
$('.remove-example').find('.hider').hide();
$('.selectpicker').change(function() {
var feta = $(this).find("option:selected:first").attr('id');
var feta1 = $(this).find("option:selected:last").attr('id');
$('.remove-example').find('.' + feta).show();
$('.remove-example').find('.' + feta1).show();
$('.remove-example').selectpicker('refresh');
});
$('.rm-mustard').click(function() {
$('.remove-example').find('.Mustard').hide();
$('.remove-example').selectpicker('refresh');
});
$('.rm-mustard1').click(function() {
$('.remove-example').find('.Mustard').show();
$('.remove-example').selectpicker('refresh');
});
$('.selectpicker').selectpicker();.btn-primary {
padding: 0px 74px;
margin-top: 5px;
}
#tastes {
margin: 15px 0px 0px 15px;
}
.padd {
margin-left:20px;
}
}<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<select class="selectpicker remove-example" multiple>
<option id="Mustard" value="">Mustard</option>
<option …推荐指数
解决办法
查看次数
如何在具有多个值的Bootstrap-select中动态选择
如果我的值是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 Facade - 没有选择"值"
将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
推荐指数
解决办法
查看次数
Bootstrap 选择错误：无法设置未定义的属性“_menu”
我已经在 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>
推荐指数
解决办法
查看次数
如何在 bootstrap 版本 5 中导入 bootstrap-select？
我想使用“bootstrap-select”创建一个简单的选择选项。我正在使用 bootstrap-select 创建我的选择器。
\n我在控制台中看到此错误
\n
<!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我怎样才能实现这个目标？
\n推荐指数
解决办法
查看次数
多个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
});
});
推荐指数
解决办法
查看次数
Bootstrap-select,angularjs下拉列表无法正常工作
我有这个问题,希望得到一些如何解决它的建议.
我已将我的html页面的一部分移动到局部视图并通过ng-view加载它现在的问题是下拉选择不再起作用了,我设法恢复了样式但是当我点击它时,它不开放.当它不在局部视图中时,我甚至不需要进行现在似乎需要的javascript调用.
这是我的代码
index.html
<link href="resources/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/bootstrap-select.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<script src="resources/js/jquery-2.1.1.min.js"></script>
<script src="resources/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap-select.js"></script>
<script src="resources/library/angular.js"></script>
<script src="resources/library/angular-route.js"></script>
<script src="resources/js/MainController.js"></script>
<script src="resources/js/main-app.js"></script>
partialview.html
-------------------
<select class="selectpicker" multiple ng-model="selE">
<option ng-repeat="e in ee">{{e}}</option>
</select>
<script>
$(document).ready(function () {
$('select').selectpicker({
style: 'btn-default',
size: false
});
});
</script>
先感谢您.
推荐指数
解决办法
查看次数
引导选择事件参数
我正在使用引导程序选择插件（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);
});
推荐指数
解决办法
查看次数
无法更改Boostrap-select selectpicker的标题
我想以编程方式更改我的Bootstrap选择selectpicker的标题。
我尝试了以下不起作用的JS代码。
$('#myPicker')
.selectpicker({title: 'New title'})
.selectpicker('render');
还有其他方法可以做到这一点吗？
html twitter-bootstrap bootstrap-select bootstrap-selectpicker
推荐指数
解决办法
查看次数
如何在Bootstrap select中设置标题样式
我在下拉框中使用了Bootstrap select（https://silviomoreto.github.io/bootstrap-select/）。
<select id="dataBox" name="dataBox" title="Select data" class="selectpicker form-control"></select>
但是，这里的问题是标题看起来与周围区域输入框中的占位符略有不同（字体和颜色）。如下图所示。无论如何，有没有格式化标题而不是占位符的格式？
这是一个标题
这是一个占位符
推荐指数
解决办法
查看次数
标签 统计
bootstrap-select ×10
jquery ×4
javascript ×3
html ×2
angularjs ×1
bootstrap-5 ×1
css ×1
dropdownbox ×1
laravel ×1