Question

下午好，您是否知道是否可以通过单击隐藏隐藏带有选择选项的“下拉列表”？单击将一个类添加到一个元素以显示一个隐藏的div，但不到1秒的时间，您就会看到下拉菜单。

如果您能帮助我，我将不胜感激

问候。

$('.select').on('click', function(e) {
   e.preventDefault();
   $(this).attr("disabled", true);
   $('.options_select').addClass('show');
});

Answer 1

否，是一个替换元素，由操作系统呈现。没有CSS选项可以隐藏下拉菜单。

Answer 2

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Styling_with_CSS上有一些注释我认为您可以这样获得所需的内容：https://codepen.io/gerard-payne/pen/NVjppd

select {
    appearance: textfield;
    -webkit-appearance: textfield;
}

option {
  display: none;
}

但也已禁用设置并添加了字体颜色。

<select disabled="disabled">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
</select>

select[disabled="disabled"] {
    color: black;
}

Answer 3

请勿将选项添加到列表中或添加类似以下内容：

CSS：

 .select > option {
       display: none;
  }

Answer 4

$(".select").on('click',function(){
$('.submenu').toggle();
})

.select{ border:solid 1px #000; display:inline-block; padding:20px; cursor:pointer;}
.submenu{ background:#345; display:none;}
.submenu a{color:#fff;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select">Select</div>
<div class="submenu">
<a href="#">option</a>
<a href="#">option</a>
<a href="#">option</a>
<a href="#">option</a>
</div>

我想你想要这个吗？如果没有让我知道

隐藏“下拉”选择

4 个答案: