可定制和动画下拉插件 - 不错的选择

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<div class="nice-select">
  <span class="current">Option 1</span>
  <ul class="list">
    <li class="option selected">Option 1</li>
    <li class="option">Option 2</li>
    <li class="option">Option 3</li>
  </ul>
</div>

<!-- Vanilla JS Version -->
<link href="css/nice-select2.css" rel="stylesheet" />
<script src="js/jquery.nice-select2.js"></script>
 
<!-- jQuery Version -->
<link href="css/nice-select.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/jquery.nice-select.js"></script>

// Vanilla JS Version
NiceSelect.bind(document.getElementById("mySelect"));
 
// jQuery Version
$('#mySelect').niceSelect();

<select class="wide">
  ...
</select>

<select class="right">
  ...
</select>

<select class="small">
  ...
</select>

<select id="mySelect">
  <option data-display="Custom Text">Option 1</option>
  ...
</select>

NiceSelect.bind(document.getElementById("mySelect"), {
  searchable: true
});

// destroy the instance
instance.destroy();
 
// up<a href="https://www.jqueryscript.net/time-clock/">date</a> the select
instance.update();