<select id="selPrinvice" class="Select2 select2-hidden-accessible" style="120px;" data-select2-id="selPrinvice" tabindex="-1" aria-hidden="true"><option value="" data-select2-id="4">请选择</option></select>
<span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="3" style=" 120px; display: none;"
><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-selPrinvice-container">
<span class="select2-selection__rendered" id="select2-selPrinvice-container" role="textbox" aria-readonly="true" title="请选择">请选择</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
浏览器开发者模式发现,使用select2插件后,你看到的下拉框是span,真正的下拉框select是隐藏掉了。
所以要隐藏下拉框应该设置最外面的span隐藏。比如我的设置如下:
$("#selPrinvice").next().css("display", "none"); //下拉框的后面一个元素隐藏
同理:设置宽度,也应该设置span。不过一开始在select写style="300px"时,在渲染成select2插件过程中,span的width取自于当前select的宽度。