Question

我希望当您按下按钮时显示选择选项但没有显示所选选项显示在按钮内的条。

这是我到目前为止所做的：

<!DOCTYPE html>
<html>
<body>

<button>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</button>
  
</body>
</html>

这就是我想要的样子，然后我会在按钮内放置一个图像

<!DOCTYPE html>
<html>
<body>

<button>
<select style="display: none;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</button>
  
</body>
</html>

Answer 1

$("#btn, .close").click(function() {
  $(".select-wrapper").toggleClass("active");
});

.select-wrapper {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vw;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(0,0,0,0.3);
}

.select-wrapper select {
  font-size: 24px;
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
}

.select-wrapper.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="image" src="http://lorempixel.com/120/60/" id="btn">
<div class="select-wrapper">
  <input type="button" value="close" class="close">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
</div>

Answer 2

我遇到类似的问题，由于某些后端问题，开发人员拒绝使用列表。

找到一个简单的作弊方法，让select标签显示所有选项，看起来像一个下拉菜单，然后我只需切换整个select标签。不完全是你要求的，但看起来像。

$("#btn, .selector").click(function() {
  $(".select-wrapper").toggleClass("active");
});

.select-wrapper{
  display: none;
  }
  
  
.select-wrapper.active {
  display: block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

add variable:
<br>
<input type="button" value="add" id="btn">
<div class="select-wrapper">
<select size="4" class="selector">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</div>





</body>

HTML隐藏按钮标记

2 个答案: