代码之家 › 专栏 › 技术社区 › Ivan

如果最初隐藏,则select2不显示占位符

jquery-select2 jquery

Ivan · 技术社区 · 7 年前

在最初隐藏时使用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% !important css规则只是部分地解决了这个问题:占位符出现了,但是输入字段随着每一项的选择而增长太多了。

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

拜托,有什么帮助吗?

2 回复 | 直到 7 年前

Carsten Løvbo Andersen Dan Nemtanu 7 年前

问题是,当默认情况下div被隐藏时,占位符会被删除。

看看下面的例子。

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

$('.select2').select2({
  width: '100%',
  placeholder: function() {
    $(this).data('placeholder');
  }
});

$('.select2').parent().addClass("hidden")

.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="" 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>

anas rasuli 6 年前

将下面的css添加到页面

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