时间戳

首页 > 解决方案 > 如果最初隐藏，Select2 不显示占位符

jquery - 如果最初隐藏，Select2 不显示占位符

问题描述

当使用 Select2 在最初隐藏<select>的多个属性时，占位符不显示。查看代码，我可以看到选择器.select2-container--default .select2-search--inline .select2-search__field的宽度为 0px（猜测是因为它是隐藏的）。

$('[data-trigger="open"]').on('click', function(){
	$('[data-target="open"]').toggleClass('hidden');
})

$('.select2').select2({
	width: '100%'
});
.hidden {
  display:none;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

<p><a href="#" data-trigger="open">Open Select2 and watch no placeholder...</a></p>
<div class="hidden" data-target="open">
  <select name="select" id="select" class="select2" multiple data-placeholder="Select one or more...">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

强制使用width: 100% !importantCSS 规则只能部分解决问题：占位符显示，但输入字段随着每次项目选择而增长太多

$('[data-trigger="open"]').on('click', function(){
	$('[data-target="open"]').toggleClass('hidden');
})

$('.select2').select2({
	width: '200px' // limit size to make the "growing "problem appear
});
.hidden {
  display:none;
}

.select2-container--default .select2-search--inline .select2-search__field {
  width: 100% !important;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

<p><a href="#" data-trigger="open">Open Select2: placeholder ok, but field grows abnormally when inserting items...</a></p>
<div class="hidden" data-target="open">
  <select name="select" id="select" class="select2" multiple data-placeholder="Select one or more...">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

请问，有什么帮助吗？

标签： jqueryjquery-select2

解决方案

将下面的 CSS 添加到您的页面 

.select2-selection--multiple .select2-search__field{
  width:100%!important;
}

推荐阅读