bootstrap-select 滚轴_Bootstrap-select（selectpicker）的使用说明
1、首先引入selectpicker插件js，css
由于：例子中用使用的是jquery语法和bootstrap前端框架，所以还要引入
注意：jQuery.js引入时要在其他js文件之前,否则js中无法识别jQuery语法
2、示例代码：
@foreach (var item inViewBag.mechineNameLists)
{@item.HOUSENAME}
View Code
3、属性说明
selected ="selected" option选中状态(全选则需在循环遍历时option时，加在该属性)
如：
@foreach (var item inViewBag.publishCodes)
{@item.Name}
multiple:多选 (不加则为单选)
data-actions-box="true"：全选，false全不选
data-live-search="true"：查询
data-none-selected-text="全部"：未选中时显示
data-max-options="10"：最多可选条数
data-selected-text-format="count > 3" 显示选择项(多选的数量在三个以下，显示文本，大于三个显示：“选中{总数}的{选中数}项”)
如图：
//清空selectpicker 清空选择
$("#codeMechineHouse").val("").trigger("change")
//刷新selectpicker
$(".selectpicker").selectpicker("refresh");
//获取selectpicker的值(字符串输出，逗号分隔)
第一种：
function getSelectpickerValue() {var v = "";//直接对selectpicker插件val(),只能获取到一个对象数组
var values = $("#codeMechineHouse").val();if (values != null && values.length > 0) {for (var i = 0; i < values.length; i++) {
v+= values[i] + ",";
}
}returnv;
}
第二种(简洁版)：
//格式如："2,3,4"
$("#codeMechineHouse").val().toString(),
//获取selectpicker的文本(字符串输出，逗号分隔)
function getSelectpickerText() {var v = "";var texts = $("#codeMechineHouse option:selected");for (var i = 0; i < texts.length; i++) {
v+= texts[i].innerText + ",";
}
}
//更简洁的获取值的写法：
var selectedValues =[];
$(".selectpicker option:selected").each(function () {
selectedValues.push($(this).val());
});
第二种初始化方式：通过ajax获取到后台数据，回显加载selectpicker
$('.selectpicker').selectpicker({
noneSelectedText:'请选择',
liveSearch:true,
size:5 //设置select高度，同时显示5个值
});
$(window).on('load', function () {var sid = $("#select_article").val();
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
$.ajax({
method:'POST',
url:'/Slider/GetOptionData',
dataType:'json',
success: function (res) {var html="";
console.log(res);for (var i = 0; i < res.content.length; i++) {//selected='selected' 勾选选择项
html += "" + res.content[i].name + "";
}
$("#select_article").html(html);$('.selectpicker').selectpicker('refresh');//加载select框选择器
}
});
});
效果图：
第三种回显的方式：
//将类似于"9,10,11"的字符串转换为["9","10","13"]这样的数组，回显勾选上原来的选择项
$("#add_senType").selectpicker('val', data.sentype.split(","));
效果图：
选择改变事件：
$('#select_article').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {if (isSelected == null) {//控件初始化，页面加载，不属于用户操作，不提示
return;
}
alert("用户修改了项！");
});
如图：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！