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>

目前占位符位于选择框内，当我选择了Im in focus和option时，如何使占位符浮动在选择框上方？感谢任何帮助谢谢

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>

如何浮动Select2占位符？

1 个答案: