select2

Posted 教父123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了select2相关的知识，希望对你有一定的参考价值。

function selectInt(url,id,type,par,defalutValue, params){
    $(id).empty();
     $.ajax({
            url:url,
            //url:‘/api/rds/applyAuthForRds‘,
            dataType: ‘json‘,
            type: ‘POST‘,
            data: params,
            success:function (responseData){
                if(responseData.code==200){
                     var data=JSON.parse(responseData.data);
                    // data=responseData.data[0].lists.enterprise_industry;
                    data=data.lists[par];
                    //console.log(data.lists.enterprise_industry);
                    var selectData=[];
                    if(type){
                        selectData.push({id:‘‘,text:‘‘});//是否是必选的操作，如果不是  第一个是空意为不是必填
                    }
//                    if(defalutValue !== ‘‘){
//                        selectData.push({id:defalutValue,text:defalutValue});//是否是必选的操作，如果不是  第一个是空意为不是必填
//                    }
                    $.each(data,function(i,v){
                        //console.log(v.value);
                        selectData.push({id:v.value,text:v.value});
                    });
                    $(id).select2({
                          data: selectData,
                          placeholder:‘请选择‘,
                          allowClear:true,
                           //theme: "classic",
                           //width:230,
                          // height:30,
                         //   tags:true,  它为true时  搜索‘ss’结果就是ss  为false时搜‘ss’如果没有对应的结果  就会提示‘无结果’// multiple:false,
//                          maximumSelectionLength: 5,
                          templateSelection:function(arg){
                                  
                                return arg.text;
                                //左用选择的在文本可见
                          },
                          templateResult:function(arg){
                            
                              return arg.text;
                              
                          }
//                          initSelection:function(){
//                             
//                          }
                        });
                
//                     $(id).select2().select2(‘val‘, defalutValue)//设定select 中的selected        
//                      $(id).change();//告诉select2代码已经更新，需要重载
                }//if
                if(defalutValue === ‘‘){
                    $(id).val(["无"]).select2();
                }else{
                    $(id).val([defalutValue]).select2();
                }
            }//succ
                  
         });//ajax end
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
        
    </head>
    <body>
        <select id=‘sels‘ class="js-example-basic-multiple">>
        
        </select>
        <span id="span">查询</span>
        <script src="js/jquery-2.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var data = [{ id: ‘‘, text: ‘‘ },{ id: ‘1‘, text: ‘enhancement‘ }, { id: ‘2‘, text: ‘bug‘ }, { id: ‘duplicate‘, text: ‘duplicate‘ }, { id: ‘invalid‘, text: ‘invalid‘ }, { id: ‘wontfix‘, text: ‘wontfix‘ }];
                $("#sels").select2({
                  data: data,
                  placeholder:‘请选择‘,
                  allowClear:true,
                   theme: "classic",
//                   tags:true,  它为true时  搜索‘ss’结果就是ss  为false时搜‘ss’如果没有对应的结果  就会提示‘无结果’
                  width:300,
                  height:100,
                  multiple:false,
                  templateSelection:function(arg){
                        //console.log(123);
                        return arg.text;
                        //左用选择的在文本可见
                  },
                  templateResult:function(arg){
                      //console.log(456);
                      return arg.text;
                      
                  }
//                  initSelection:function(){
//                      console.log(‘aa‘);
//                  }
                });
                var span=document.getElementById(‘span‘);
                $(‘#span‘).on(‘click‘,function(){
                    console.log($("#sels").val());
                });
                
                $("#sels").on("change",function(e){
                　　  
                　　console.log(123);
                })
            });
        </script>
    </body>
</html>

 

以上是关于select2的主要内容，如果未能解决你的问题，请参考以下文章

Laravel：如何在控制器的几种方法中重用代码片段

select2代码的三元运算符需要说明

select2插件多选不换行

如何从后面的 asp.net 代码中获取 Select2 值

清除 select2 而不触发更改事件

从 ASP .Net Web 表单后面的代码中获取 Select2 选定值