Bootstrap-Select下拉框经验分享以及Json格式的转换
我刚开始也是个入职新人小白，但是需求就是让我做一个bootstrap框架渲染的下拉框，我刚开始也不会，查了很多网上的资料之后我慢慢的自学也一下就会了，其实也不难，只是我做出来下拉框渲染，动态连接后台接口加上模糊查询用的挺久时间的，用了三天时间，下面就把我的经验告诉大家。
第一步，刚开始你要导入bootstrap js文件和cs文件，我也是在网上把js文件和cs文件下载到本地的。
<script src="~/Content/jquery.min.js" type="text/javascript"></script>
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/bootstrap.min.js" type="text/javascript"></script>
<link href="~/Content/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="~/Content/bootstrap-select.min.js"></script>
<script src="~/Content/bootstrap-typeahead.js"></script>
第二步，在你的body里面写select控件，直接上代码吧。
这是js的代码
<body>
<div>
<select id="slpk" data-provide="typeahead" class="form-control"
data-live-search="true" data-done-button="true"
data-actions-box="false"></select>
</div>
</body>
第三步就是js代码和cs代码，我都一起发了，上代码。
我这里的ajax写的注释说只加载前面50条记录是因为我们公司下拉框的数据很多几千条，所以不能同时在客户界面上进行显示，所以接口定义的是只查询前面50条记录显示在页面上，如果没有这么多数据就这样写也没问题，可以忽略这个东西，然后模糊查询是下拉框自带的一个属性，写在select标签当中，如果你有和我一样的需求的话，那你要在这个ajax前面加一个chang事件的模糊查询。
<script>
$(function () {
$("#slpk").selectpicker({
noneSelectedText: '请选择'
});
//初始化
$(window).on('load', function () {
$('.form-control').selectpicker();
$(".form-control").selectpicker('refresh');
$('.form-control').selectpicker('val', '');
$('.form-control').selectpicker({
noneSelectedText: '',
noneResultsText: '',
liveSearch: true,
size: 10 //设置select高度，同时显示5个值
});
});
//加载下拉框前50条数据
$.ajax({
url: '../../../ajax/GETTemplate_Info.ashx?action=GETTemplate_Info', //接口连接地址
type: "post",
dataType: "Json",
success: function (msg) {
//这里是从后台接口传来的数据，然后给他转换格式，去括号逗号之类的。
var aPos = msg.indexOf("[");
var bPos = msg.indexOf("]");
var r = msg.substr(aPos, bPos - aPos + 1);
var str = '';
var data = JSON.parse(r);
var select = $("#slpk");
for (var i = 0; i < data.length; i++) {
str += '<option value="' + data[i].Id + '">' + data[i].T_Name + '</option>';
}
select.append(str);
// 更新 !
$(".form-control").selectpicker('render');
$('.form-control').selectpicker('refresh');
}
});
});
</script>
很多人写好了之后发现下拉框还是有问题
所以这段代码是最重要的！！！
// 更新 !
$(".form-control").selectpicker('render');
$('.form-control').selectpicker('refresh');
接下来是cs的代码
其实cs代码有没有没关系的，这是设置下拉框高度和宽度的，其他的设置样式都可以在网上找的到
<style type="text/css">
.bootstrap-select.form-control:not([class*=col-]) {
width: 300px;
}
.bs-actionsbox, .bs-donebutton, .bs-searchbox {
padding: 2px;
}
.form-control.hover.dropdown-menu {
display: block;
}
</style>
下面给大家看一下效果图片，大概就是这样的。
这是我自己在网上看到的各种资料然后自己做完整理出来给大家看看，希望能对大家有所帮助，做的比较简陋，谢谢。