如何浮动选择2占位符

Question

Im 在 html 中使用 Select2

$(document).ready(function() {
  var $progControl = $(".destination").select2({
    placeholder: "Destination(s)"
  });
})

.custom-select {
  width: 300px;
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<select name="destinations" id="destinations" class="custom-select destination" multiple="multiple">
  <option value="1">Sample 1</option>
  <option value="2">Sample 2</option>
  <option value="3">Sample 3</option>
  <option value="4">Sample 4</option>
</select>

当前占位符位于选择框中，当 Im 处于焦点和选项时，如何使占位符浮动在选择框上方？感谢任何帮助谢谢

Answer 1

好吧，我为你写了一个特别的插件来做到这一点(我希望(。因此，您可以像下面的代码段一样使用它。

让我知道你怎么看。

$(document).ready(function() {
  var $progControl = $(".destination").select2PlaceholderTransition({
    placeholder: 'Destination(s)',
    allowClear: true
  });
});

.input-wrapper {
  padding-top: 30px;
}
.custom-select {
  width: 300px;
  max-width: 100%;
}

<link href="https://rawgit.com/moshfeu/select2-placeholder-transition/25a7a45569bc417b3332f75db317aa53e1e37927/select2-placeholder-transition.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/moshfeu/select2-placeholder-transition/32f8cf2dfccc69a4822fa9c884bc6234a2b3ca05/select2-placeholder-transition.js"></script>
<div class="input-wrapper">
  <select name="destinations" id="destinations" class="custom-select destination" multiple="multiple">
    <option value="1">Sample 1</option>
    <option value="2">Sample 2</option>
    <option value="3">Sample 3</option>
    <option value="4">Sample 4</option>
  </select>
</div>