jquery - 如何 float Select2 占位符？

Question

我在 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>

当前占位符位于选择框内，当我处于焦点并选择选项时，如何使占位符 float 在选择框上方？感谢任何帮助谢谢

Answer 1

好吧，我写了一个plugin特别适合这样做的你(我希望)。所以你可以像下面的代码片段一样使用它。

请告诉我你的想法。

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