单选：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<!--bootstrap、font、bootstrap-select 3个css合到一起了-->
<link rel="stylesheet" href="boot-font.css">
<script src="../../jquery-1.12.4.min.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-select.js"></script>
</head>
<body>
<br><br><br><br><br>
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<!--引入相关的CSS JS后 直接加个 selectpicker就行-->
<select id="sel1" class="selectpicker">
<option value="1">陕西省</option>
<option value="2">浙江省</option>
</select>
</div>
</div>
<script type="text/javascript">
$("#sel1").selectpicker('refresh'); //完成需要的功能后 手动刷新对应的select
$("#sel1").selectpicker('val',2); //设置指定选中的值
</script>
</body>
</html>
ajax动态设置：
function selTest(v) {
$.ajax({
// async:false, //根据需求，选择同步或异步获取数据
type: "post",
url: url,
dataType: "json",
data:{"project_id": currentProId},
success: function (json) {
console.log(json);
var Data=json.data,length=Data.length;
if(length>0){
var html = "<option value=''>请选择</option>";
for (var i = 0; i < length; i++) {
html += "<option value='" +Data[i].id+ "'>" +Data[i].title+"</option>";
}
$(ele).html(html);
}else{
$(ele).html("<option value=''>暂无</option>");
}
$(ele).selectpicker('refresh'); //设置好内容后刷新， 多用于异步请求
if(v>0){
$(ele).selectpicker('val',v); //如果需要同时设置显示指定的val
}
},
error: function () {
console.log("请求失败");
}
});
}
多选：
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<!--多选的时候关键就是多加个 multiple-->
<select id="add_station" class="selectpicker" multiple>
<option value="1">陕西省</option>
<option value="2">浙江省</option>
<option value="3">江苏省</option>
<option value="4">安徽省</option>
<option value="5">吉林省</option>
</select>
</div>
</div>
<script type="text/javascript">
//手动刷新
document.getElementById("add_station").options.selectedIndex = -1;
$('.selectpicker').selectpicker('val', '');
$(".selectpicker").selectpicker('refresh');
//多选时收集选中项的val
function selectedTrain(id1){
var str=[];
var obj = document.getElementById(id1);
for(var i=0;i<obj.options.length;i++){
if(obj.options[i].selected){
str.push(obj.options[i].value);
}
}
return str;
}
</script>
配合 bootstrapValidator 验证样式：
$(function(){
$('.testForm')
.bootstrapValidator({
message: 'This value is not valid',
excluded: [":disabled"], //这句一定要加
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
bind:{
validators: {
notEmpty: { //多选验证要加这句
message: '请选择'
},
callback:{ //一般单选用这一条就行----------
message:'请选择',
callback:function (value,validator) {
if(value==""){
return false;
}else{
return true;
}
}
}
}
}
}
})
.on('success.form.bv', function(e) {
e.preventDefault();
});
});
提交后手动刷新、清空表单：
$('#formId').data('bootstrapValidator').resetForm(true);
暂时想到这些，后面想到其他的再来补充
1081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
