2016-11-27 270 views
0

你好,我正在使用select2插件下拉列表。我試圖在打開的事件上將寬度設置爲不同的值,但沒有成功。有沒有辦法以更方便的方式來實現這一點?動態改變寬度Select2

 $('#select').select2({ 
      width: o.width, 
      data: objs // some data 
     }); 

     $('$select').on('select2:open', function (e) { 
      $(this).select2({width: 400}); // this does not work... 
      // select2 is opened, handle event 
     }); 

回答

0

試試這個可以幫助你,你可以添加一個CSS類,並設置寬度爲三網融合


 
$(document).ready(function() { 
 
    $("#ddl1").select2({dropdownCssClass : 'set_ddl_size'}); 
 
});
#ddl1 { 
 
    width: 100%;  
 
} 
 

 
.select2-drop-mask { 
 
      width: 99%; 
 
     } 
 
     .set_ddl_size { 
 
      width: 60% !important; 
 
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdn.jsdelivr.net/select2/3.3.2/select2.css" rel="stylesheet"/> 
 
<script src="http://cdn.jsdelivr.net/select2/3.3.2/select2.js"></script> 
 
<body> 
 
    <select id="ddl1"> 
 
     <option value="small">Small</option> 
 
     <option value="medium">Medium Medium</option> 
 
     <option value="larg">Larg Larg Larg Larg</option> 
 
     <option value="verylarge">verylarge verylarge verylarge verylarge </option> 
 
    </select> 
 
</body>