标签: bootstrap-select
bootstrap-select添加项目并选择它
我正在使用Silvio Moreto的Bootstrap Select.
在我的页面上,我有一个按钮,打开一个带有输入框的模态,允许您将项添加到选择器.然后我想自动选择该项目,但我无法让它工作.
我的代码是:
$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');
$('#myselect').val(newitemnum);
$('#myselect').selectpicker('refresh');
但它只是不起作用.该项目未被选中.
我尝试用以下内容替换选择线:
$('#myselect').selectpicker('val',newitemnum);
但这也不起作用
任何想法都很受欢迎(虽然该项目已添加到选择选择器).
推荐指数
解决办法
查看次数
AJax不能与bootstrap-select一起使用
我找到了flask-jquery-ajax示例,其中用户从车辆"Make"下拉菜单中选择项目,通过对所选择的make的模型列表进行AJAX请求来填充车辆"Model"下拉菜单.
我试图通过bootstrap-select替换下拉菜单,只要我在第二个下拉菜单中包含class ="selectpicker form-control",它就会在选择第一个下拉列表之后再填充它.
这是HTML模板:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flask Jquery AJAX Drop Down Menu Example</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css>
<link rel="stylesheet" href="{{ url_for('static', filename='web.css') }}">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
</head>
<body>
<h1>Select Vehicle</h1>
<form class="form-horizontal" action="/" method="POST" >
<div class="input-group">
<span class="input-group-addon">Make:</span>
{{ form.make(id="make_select", class="selectpicker form-control") }}
</div>
<div class="input-group">
<span class="input-group-addon">Model:</span>
{{ form.model(id="model_select", class="selectpicker form-control") }}
</div>
<button …推荐指数
解决办法
查看次数
Bootstrap-select插件:如何避免闪烁
Bootsrap-select插件很棒(http://silviomoreto.github.io/bootstrap-select/).它提供了一种在Bootstrap中创建华丽选择菜单的简便方法.然而,我遇到的一个问题是页面加载时"闪烁".我的意思是相当直接的:
- 页面加载原始HTML选择元素(当然看起来像垃圾)
- Bootstrap-select插件JS运行
- 在页面加载后的某个明显时间,原始HTML select元素在步骤(2)中被JS转换为一个很好的Bootstrap-select元素.
因此,用户首先看到HTML select元素,然后看到它切换到漂亮的Bootstrap-select项,因此"闪烁".
有谁找到了解决问题的好方法？
javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-select
推荐指数
解决办法
查看次数
IE中的Bootstrap select加载时间过长
我正在将1000条记录加载到bootstrap select下拉列表中.在Chrome中需要大约2秒钟,但在IE 9中需要30秒.此外,在IE中取消或x输出引导模式也需要10 + s.API调用没问题,但渲染速度很慢; 有人可以给我一些方向吗？
所以我正在加载客户列表并设置所选.这是代码.
var customerPicker = $('#customer-picker');
API.getCustomers().then(function (result) {
loadDropdown(customerPicker, result.customers);
// set the selected to current customer; it takes 10s in IE
customerPicker.val(currentCustomerId).selectpicker('refresh');
// it takes about 10s in IE too. selector is the bs modal div
$(selector).css('z-index', '1060').modal('show');
}).catch(function (errorMessage) {
ToastManager.showError(errorMessage || 'An error occurred while loading customer list. Please try again.');
});
function loadDropdown($div, arr) {
var options = '';
$.each(arr, function (i, item) {
options = options + …推荐指数
解决办法
查看次数
Bootstrap Select下拉列表自动向下移动
我是Bootstrap在IE11中选择用户.
当我用ajax填充数据并打开它然后它自动向下移动病房,当我选择任何值时,它没有被选中.如何删除此错误？
jQuery.ajax({
url: base_url + "UserBusinesses/ajaxState/" + countryId,
dataType: 'json',
beforeSend: function () {
$('#UserBusinessStateId').html('<option value="">Loding... </option>');
$('#UserBusinessStateId').selectpicker('refresh');
$('#UserBusinessCityId').html('<option value="">Select city</option>');
$('#UserBusinessCityId').selectpicker('refresh');
},
success: function (obj) {
var addHtml = '';
addHtml += '<option value="">Select state</option>';
$.each(obj, function (key, value) {
var selected = "";
if (selectedState == key) {
var selected = "selected='selected'";
}
addHtml += "<option value='" + key + "' " + selected + ">" + value + "</option>";
});
jQuery("#UserBusinessStateId").html(addHtml);
$('#UserBusinessStateId').selectpicker('refresh');
}
});
推荐指数
解决办法
查看次数
未捕获的类型错误：z.fn.dropdown 未定义
我想使用“bootstrap-select”创建一个简单的选择选项。我正在使用 bootstrap-select 创建我的选择器。
\n我在控制台中看到此错误。
\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="css/bootstrap.rtl.min.css">\n <link rel="stylesheet" href="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\n<script src="js/bootstrap.bundle.min.js"></script>\n<script src="js/jquery-3.6.0.min.js"></script>\n<script src="js/bootstrap-select.min.js"></script>\n<script src="js/defaults-fa_IR.min.js"></script>\n<script>\n $(\'#lang\').selectpicker();\n</script>\n</body>\n</html>\n我怎样才能实现这个目标？
\n推荐指数
解决办法
查看次数
Bootstrap-select on click get clicked value
我正在使用jQuery插件:bootstrap-select.js我的HTML是select(multiple) - >选项.当用户选择或取消选择该选项时,我想获取当前单击的选项值.
示例:用户选择项目4 = console.log项目4.然后用户还选择项目2 = console.log项目2.目前我得到项目4,项目2 ...他们总是在一个数组而不是个人.
我的最终目标是根据用户选择的内容显示和隐藏页面上的div.将有多个选择选项字段.
HTML代码:
<fieldset class="dreamT">
<select name="team" id="team" multiple class="dropdown selectpicker show-menu-arrow show-tick form-control" title="Pelaajat" data-width="100%" data-size="auto" multiple data-selected-text-format="count > 2">
<optgroup>
<option value="item 1">Item 1</option>
<option value="item 2">Item 2</option>
<option value="item 3">Item 3</option>
<option value="item 4">Item 4</option>
<option value="item 5">Item 5</option>
<option disabled value="item 6">Item 6</option>
</optgroup>
</select>
</fieldset>
JS代码:
$("select#team").on("change", function(value){
var This = $(this);
var selectedD = $(this).val();
console.log(selectedD);
});
当前输出: ["item 1", "item 3", "item …
推荐指数
解决办法
查看次数
Bootstrap-select不会切换"打开"类
请查看 - > FIDDLE
我从http://silviomoreto.github.io/bootstrap-select/下载了源码,我真的不知道为什么它不会切换"开放"类的".dropdown-toggle"我可以通过添加一些凌乱的脚本来修复它,但我更喜欢插件工作正常.
HTML:
<div class="number customdp">
<select class="simple-dropdown" name="number">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
有没有人有解决方案？
推荐指数
解决办法
查看次数
样式引导程序-选择“占位符”不同
如果选定的选项是jQuery的第一个（占位符），则我已经成功地将不同的样式应用于普通的select元素，如下所示：
<script type="text/javascript">
$(document).ready
(
function ()
{
$('select').each(function (index, value)
{
if($(this).val()==="")
{
$(this).css('font-style', 'italic');
$(this).css('color', '#636c72');
$(this).children().css('font-style', 'normal');
}
else
{
$(this).css('font-style', 'normal');
$(this).css('color', 'black');
$(this).children().css('font-style', 'normal');
}
});
}
);
</script>
但是，由于其中包含的条目数量庞大（可能是数千个），并且有必要使用文本搜索来缩小条目范围，因此我的某些表格正在使用bootstrap-select组件。这些组件会产生更复杂的HTML，并且以上代码根本无法工作。
我试图找到一种方法来应用与普通选择相同的逻辑：如果所选的选项是第一个选项，则以斜体和不同的颜色设置输入的样式。这是此类select的示例：
<select class="form-control selectpicker" id="medFilter" name="medFilter" th:value="${medFilter}"
onchange="this.form.submit()" data-live-search="true" title="Select Med">
<option value="">Search Med</option>
<option th:each="med : ${meds}" th:value="${med.id}"
th:text="${med.toString()}" th:selected="${med.id == medFilter}">
</option>
</select>
有没有人能够做到这一点？
推荐指数
解决办法
查看次数
Bootstrap 5 选择下拉菜单，多个属性折叠
我正在尝试使用带有“multiple”属性的 select 元素，但我希望它折叠起来，直到用户单击它。问题是 Bootstrap 5 不再支持 Bootstrap 4 及更早版本中使用的多重选择。曾经有一个名为“selectpicker”的 CSS 类在这些下拉列表中用于选择多个选项。有人有解决办法吗？我真正想要的只是选择菜单成为一个可以打开和关闭的下拉菜单，而不仅仅是一直打开。谢谢你！
css jquery bootstrap-select bootstrap-selectpicker bootstrap-5
推荐指数
解决办法
查看次数
标签 统计
bootstrap-select ×10
jquery ×8
javascript ×3
bootstrap-5 ×2
css ×2
ajax ×1
flask ×1
html ×1
placeholder ×1