动态更改宽度选择2

时间:2016-11-27 18:10:43

标签: javascript jquery 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
        });

1 个答案:

答案 0 :(得分:0)

  

尝试这可能会对您有所帮助,您可以添加一个css类并将宽度设置为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>
&#13;
&#13;
&#13;

相关问题