怎么让点击▼时触发select行为？

发布于
2017-09-21

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <select>
      <option value="1">value1</option>
    </select>
    <span>▼</span>
  </body>
</html>

怎么让点击▼时触发select行为？

html

html5 javascript

阅读 5.7k

8 个回答

得票最新

Charles

1.4k119

发布于
2017-09-21

不行。workaround: 自己做一个<ul>嵌套<li>，动态显示<li>，这也是一些自定义select样式库的通常做法。

Jarvis

5.1k1419

发布于
2017-09-21

改成这样即可：

<select id="selectTag">
  <option value="1">value1</option>
</select>
<span><label for="selectTag">▼</label></span>

海光

1.1k11430

发布于
2017-09-21

可以参考 bootstrap 的下拉原理，挺简单的。
1.下拉菜单设置 display:none 来隐藏
2.当点击父菜单项时，下拉菜单将会被显示出来，再次点击时，下拉菜单将继续隐藏。其实就是在父菜单项增加 open 类

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.open > .dropdown-menu {
  display: block;
}

Wendy

发布于
2017-09-21

新手上路，请多包涵

可以参考bootstrap的下拉菜单

樊思雨

30221536

发布于
2017-09-21

可以点击span更改下拉列表的size属性，有展开效果，但是不美观

spd9

6116

发布于
2017-09-21

<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>