原生select刚进页面就展开下拉菜单列表

可以使用 HTML 的 `autofocus` 属性和 JavaScript 的 `click()` 方法来实现该功能。

首先，在 `select` 元素上添加 `autofocus` 属性，让它成为页面加载后的默认焦点。

<select autofocus>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

然后，使用 JavaScript 在页面加载后触发 `click()` 方法，模拟用户点击下拉菜单，使其展开。

<script>
  window.onload = function() {
    document.querySelector('select').click();
  }
</script>

这样，当页面加载后，`select` 元素将成为默认焦点，并且下拉菜单列表将自动展开。

相关问题

原生select下拉菜单没有值为什么还会展示下拉菜单，如果没有值怎么隐藏

原生的 select 下拉菜单在没有选项时也会展示下拉菜单，这是浏览器默认的行为。如果你想在没有选项时隐藏下拉菜单，可以通过 JavaScript 来实现。

具体做法是，当 select 元素中没有选项时，动态设置其样式的 display 属性为 none，从而隐藏下拉菜单。代码示例如下：

var selectElement = document.getElementById("mySelect");
if (selectElement.options.length == 0) {
  selectElement.style.display = "none";
} else {
  selectElement.style.display = "block";
}

其中，"mySelect" 是你的 select 元素的 ID。通过判断选项的数量，如果为 0，就将 display 属性设置为 none，否则设置为 block。这样就可以动态地隐藏或显示下拉菜单了。

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. 绑定下拉菜单选项的点击事件，让其选中对应的选项，并更新文本框的内容。