html下拉列表插件,js+CSS实现模拟华丽的select下拉菜单效果

这里给出一个简单的实现，使用了jQuery和CSS来模拟下拉菜单效果。

HTML代码：

<div class="custom-select">
  <select>
    <option value="">请选择</option>
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
  </select>
</div>

CSS代码：

.custom-select {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}

.custom-select select {
  display: none;
}

.custom-select::after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  content: "\f107";
  font-family: "FontAwesome";
  font-size: 14px;
  color: #999;
  pointer-events: none;
}

.custom-select.open::after {
  content: "\f106";
  color: #666;
}

.custom-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  display: none;
  max-height: 240px;
  overflow-y: auto;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.custom-select.open .custom-select-dropdown {
  display: block;
}

.custom-select-dropdown-option {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  cursor: pointer;
}

.custom-select-dropdown-option:hover {
  background-color: #f5f5f5;
}

JavaScript代码：

$(document).on("click", function(e) {
  var $target = $(e.target);
  if ($target.closest(".custom-select").length) {
    $target.closest(".custom-select").toggleClass("open");
  } else {
    $(".custom-select").removeClass("open");
  }
});

$(".custom-select select").on("change", function() {
  var text = $(this).find("option:selected").text();
  $(this).closest(".custom-select").find(".custom-select-text").text(text);
});

$(".custom-select select").each(function() {
  var $this = $(this),
    numberOfOptions = $(this).children("option").length;

  $this.addClass("s-hidden");

  $this.wrap('<div class="custom-select"></div>');

  $this.after('<div class="custom-select-text">' + $this.children("option").eq(0).text() + '</div>');

  var $dropdown = $('<div class="custom-select-dropdown"></div>');
  for (var i = 0; i < numberOfOptions; i++) {
    $dropdown.append('<div class="custom-select-dropdown-option">' + $this.children("option").eq(i).text() + '</div>');
  }

  $this.after($dropdown);
});

这段代码的实现原理是：

1. 隐藏原生的下拉菜单，并在其外部包裹一个自定义的容器。
2. 在容器中添加一个显示当前选项的文本框，以及一个下拉菜单容器。
3. 遍历所有选项，把它们添加到下拉菜单容器中。
4. 绑定点击事件，让点击自定义下拉菜单的容器时，切换下拉菜单的显示状态。
5. 绑定下拉菜单选项的点击事件，让其选中对应的选项，并更新文本框的内容。