瀏覽器開發者模式發現,使用select2插件後,你看到的下拉框是span,真正的下拉框select是隱藏掉了。 所以要隱藏下拉框應該設置最外面的span隱藏。比如我的設置如下: 同理:設置寬度,也應該設置span。不過一開始在select寫style="width:300px"時,在渲染成selec ...
<select id="selPrinvice" class="Select2 select2-hidden-accessible" style="width: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="width: 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="width:300px"時,在渲染成select2插件過程中,span的width取自於當前select的寬度。