bootstrap-multiselect多选下拉框的实现

最新推荐文章于 2018-08-28 18:08:57 发布

Vain-Glory

最新推荐文章于 2018-08-28 18:08:57 发布

阅读量2.3k

点赞数 3

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/William_hangshao/article/details/62216081

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、文件引用

 
 < 
 script 
 type 
 = 
 "text/javascript" 
 src 
 = 
 "js/common/jquery.min.js" 
 ></ 
 script 
 > 

 
 < 
 link 
 rel 
 = 
 "stylesheet" 
 href 
 = 
 "css/bootstrap-3.3.2.min.css"  
 type 
 = 
 "text/css" 
 /> 

 
  < 
  script 
  type 
  = 
  "text/javascript" 
  src 
  = 
  "js/common/bootstrap-3.3.2.min.js" 
  ></ 
  script 
  > 
 

 
  < 
  link 
  rel 
  = 
  "stylesheet" 
  href 
  = 
  "css/bootstrap-multiselect.css"  
  type 
  = 
  "text/css" 
  /> 
 

 
  < 
  script 
  type 
  = 
  "text/javascript" 
  src 
  = 
  "js/common/bootstrap-multiselect.js" 
  ></ 
  script 
  > 
 

2、div

 
      
    < 
   div 
   class 
   = 
   "control-group" 
   > 
  

 
          
   < 
   div 
   class 
   = 
   "controls" 
   > 
  

 
              
   < 
   div 
   class 
   = 
   "input-append" 
   > 
  

 
       关联客户： 
   < 
   select 
   id 
   = 
   "relateCustomer" 
   multiple 
   = 
   "multiple" 
   > 
  

 
   </ 
   select 
   > 
   &nbsp;

 
   </ 
   div 
   >

 
   </ 
   div 
   >

 
    </ 
    div 
    >

3、后台交互

 
    $(document).ready( 
    function 
    () { 
   

 
    //关系客户查询条件

 
      $.ajax({ 
   

 
          url : __serverUrl + 
    'kLine/relateCustomer.do' 
    , 
   

 
          type : 
    "post" 
    , 
   

 
          dataType : 
    'json' 
    , 
   

 
          success : 
    function 
    (data) { 
   

 
             
    if 
    (data != 
    null 
    && data != 
    '' 
    ) { 
   

 
    var 
    relateCust = data;

 
    var 
    relhtml= 
    "" 
    ;

 
    for 
    ( 
    var 
    i = 0; i < relateCust.length; i++) {

 
    var 
    row = relateCust[i];

 
                    
    if 
    (row.OUPGRID != 
    null 
    && row.OUPGRID != 
    '' 
    ) 
   

 
                        relhtml += 
    "<option value=\"" 
    + row.OUPGRID + 
    "\">" 
    + row.OUPNAME + 
    "</option>" 
    ; 
   

}

 
                      $( 
    "#relateCustomer" 
    ).empty().append(relhtml); 
   

 
                       $( 
     '#relateCustomer' 
     ).multiselect({ 
    
     enableFiltering: 
     true 
     , 
    
                                includeSelectAllOption: 
     true 
     , 
    
                                maxHeight: 200, 
       
                         }); 
     //多选下拉框