2016-11-27 112 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


 
$(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>

...あなたはCSSクラスを追加し、CSSに幅を設定することができ、これはあなたを助けるかもしれない試してみてください
関連する問題