bootstrap / select、selectpicker 单选/多选/ ajax获取、各种刷新、重置 / 验证样式

电玩女神 2022-05-10 05:26 129阅读 0赞

![在这里插入图片描述][70]

### 单选： ###

<!DOCTYPE HTML>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <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">
              
                <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>

![在这里插入图片描述][70 1]

### ajax动态设置： ###

![在这里插入图片描述][70 1]

### 多选： ###

<div class="row">
            <div class="col-xs-6 col-xs-offset-3">
                           
                <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>

![在这里插入图片描述][70 1]

### 配合 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);

暂时想到这些，后面想到其他的再来补充  
![在这里插入图片描述][70 2]

[70]: /images/20220510/841f51c1c363416893d173b6a8b496ef.png
[70 1]: /images/20220510/d87438dcc934453cbcf49f3787f072b4.png
[70 2]: /images/20220510/a37efc458ae14125985820f3a429ada9.png