我正在使用这样的Bootstrap-Select插件:
HTML:
<select name="selValue" class="selectpicker">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
<option value="4">Val 4</option>
</select>
Javascript:
$('select[name=selValue]').selectpicker();
现在我想在点击按钮时将选择的值设置为此选择...如下所示:
$('#mybutton').click(function(){
$('select[name=selValue]').val(1);
});
但没有任何反应.
我怎样才能做到这一点？
我正在使用Bootstrap 3.0.2和Bootstrap-select插件.
这是我的选择列表:
<select class="selectpicker" data-live-search="true" data-size="7">
<option>Petr Karel</option>
<option>Honza Novák</option>
<option>David Egydy</option>
<option>Sláva Ková?</option>
<option>Hana Skalická</option>
<option>Simona Kolá?ová</option>
<option>Kate?ina Sychová</option>
<option>Amálka Sychová</option>
<option>Jana Sychová</option>
<option>Magdaléna Sychová</option>
<option>Tereza Sychová</option>
<option>Bohdana Sychová</option>
</select>
这是我的JavaScript:
//inicialization of select picker
$('.selectpicker').selectpicker();
//on change function i need to control selected value
$('select.selectpicker').on('change', function(){
var selected = $('.selectpicker option:selected').val();
alert(selected);
});
我的问题是改变功能不起作用.它没有做任何事情,我自己找不到解决方案.
如果我把它放入文件准备而不是改变功能它似乎工作.所以我想我在某处犯了错误:
$('select.selectpicker').on('change', function(){
我也尝试过只使用:
$('.selectpicker').on('change', function(){
没有这个选择前缀但没有任何变化.
解决方案是将jquery代码放入document.ready().感谢Kartikeya
我在许多论坛上看到,在测试版本的bootstrap 4之后,select和multiselect的问题已得到解决.
不幸的是,我无法像(bootstrap 3)中的(bootstrap 3)那样显示多选.
Bootstrap 3代码段
$('select').selectpicker();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<select class="selectpicker" multiple data-live-search="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>Bootstrap 4片段
$('select').selectpicker();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<select class="selectpicker" multiple data-live-search="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>我尝试使用带有bootstrap-select的Label 2,但它看起来与bootstrap(Label 1)不同.如何让下面代码中的两个标签看起来一样？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Test</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 href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Labe 1</span>
<input type="text" class="form-control" name="snpid" placeholder="Test">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">GO!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div>
<BR/>
<HR>
<div class="container">
<form class="form-inline">
<div …jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-select
我正在使用Bootstrap-select插件(https://silviomoreto.github.io/bootstrap-select/)作为我的下拉选择框.单击一个按钮后,我想要刷新该框并重置"选中"选项.这是下拉列表
<select id="dataPicker" class="selectpicker form-control">
<option value="default" selected="selected">Default</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
这是我的尝试,不起作用.关于它应该如何的任何想法？
$("#dataPicker option:selected").val('default');
$("#dataPicker").selectpicker("refresh");
css jquery twitter-bootstrap drop-down-menu bootstrap-select
我正在使用Bootstrap Select为手风琴中的某些选择字段设置样式.Bootstrap select具有一个功能,如果它靠近屏幕底部,它将使你的下拉式下拉.
在这种情况下,我不希望它放弃,但我找不到禁用它的位置.
Bootstrap选择:https://developer.snapappointments.com/bootstrap-select/
我正在使用Bootstrap Select(http://silviomoreto.github.io/bootstrap-select/)显示我网站每个部分的Font-Awesome图标下拉列表.
我添加了添加新部分的功能 - 当点击添加按钮时,会添加一个新部分(上一部分的副本).在本节中,Bootstrap Select不起作用.
我尝试重新启动它,如:
var select = $('[name="section['+ numbersection +'][section_icon]"]');
$(select).selectpicker('destroy');
$(select).selectpicker({
showIcon: false
});
但这不起作用,因为detroy方法似乎没有触发.有没有办法在动态添加的元素上重新启动Bootstrap Select？
还有selectpicker旁边checkbox.我想如果复选框被选中,selectpicker将被启用,如果未选中,则selectpicker将被禁用.我写了这个不起作用(这是小提琴):
$('.checkBox').on('ifChecked', function(event) {
$(this).parents('.clearfix').find('.selectpicker').removeAttr('disabled');
});
$('.checkBox').on('ifUnchecked', function(event) {
$(this).parents('.clearfix').find('.selectpicker').attr('disabled');
});
我曾经e.target.value从bootstrap-select中检索当前选定的值,但是它返回了第一个选择的值,即警报保持显示项目1,当项目1和项目2被选中时,即使项目2是最近选择的.
如何获取最近选择的值以及如何选择选择的选项？
<select multiple class="selectpicker" multiple data-selected-text-format="count > 1">
<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>
$('.selectpicker').change(function (e) {
alert(e.target.value);
});
javascript jquery html-select twitter-bootstrap bootstrap-select
我找到了这个Bootstrap Select项目及其Rails的宝石.我想在select标签中实现搜索.
我检查元素,这里是HTML源:
<select class="selectpicker" data-live-search="true">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
</select>
如何data-live-search="true"在表单中添加select标签？
我的表格选择:
<%= f.select :food_id, options_for_select(Food.all.map{|c| [c.name, c.id]}, f.object.food_id), {}, {class: "form-control selectpicker"} %>
我尝试过的:
<%= f.select :food_id, options_for_select(Food.all.map{|c| [c.name, c.id]}, f.object.food_id), {}, {class: "form-control selectpicker", data: "live-search"} %>
但它不起作用.
ruby ruby-on-rails twitter-bootstrap ruby-on-rails-4 bootstrap-select
bootstrap-select ×10
jquery ×8
javascript ×3
select ×2
bootstrap-4 ×1
css ×1
html ×1
html-select ×1
icheck ×1
ruby ×1