无法使第一个 <option> 不可见

Question

我有一个 <select> 并且希望第一个选项不可见，因为移动版本上的文本不够 space 并且无论如何它都会被切掉所以我决定只做它消失了，但它不会工作。仅适用于其余选项（在 PC 浏览器上），但不适用于第一个选项。这是为什么？

这是我已经尝试过的方法

CSS:

option:first-child {
    color: transparent;
}

HTML:

<select>    
    <option value="">Please select</option> 
    <option value="1">1</option>    
    <option value="2">2</option>    
    <option value="3">3</option>    
</select>

谢谢。

Answer 1

option:first-child{
 display: none;
}

<select> 
 <option disabled value>Please select</option> 
 <option value="1">1</option>    
 <option value="2">2</option>    
 <option value="3">3</option>    
</select>

使用javascript（最佳方式）

(function(){
  document.getElementById("first").text = "";
})()

<select id="mySelect"> 
  <option value id="first">Please select</option> 
  <option value="1">1</option>    
  <option value="2">2</option>    
  <option value="3">3</option>    
</select>

如果您只想在移动设备中隐藏第一个选项，请按照此操作

(function(){
 var window_width = $(window).width();
 if(window_width < 480){
  document.getElementById("first").text = "";
 }
})()

<select id="mySelect"> 
 <option value id="first">Please select</option> 
 <option value="1">1</option>    
 <option value="2">2</option>    
 <option value="3">3</option>    
</select>
<p>This will hide only in mobile screen</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Answer 2

您可以将其设置为 display: none; 唯一的问题是，它在 Internet Explorer 中不起作用（惊喜！）

或者将 <option> 留空...

Answer 3

jQuery.fn.toggleOption = function(show) {
       jQuery(this).toggle(show);
       if (show) {
       if (jQuery(this).parent('span.toggleOption').length)
        jQuery(this).unwrap();
       } else {
             if (jQuery(this).parent('span.toggleOption').length == 0)
               jQuery(this).wrap('<span class="toggleOption"     style="display:none;" />');
   }
    };

Answer 4

这是一个适合你的工作pluncker。将其更改为 display:none 并将 select 添加到 CSS

或

您可以在 CSS

中使用 visibility: hidden; 而不是 display:none

select option:first-child {
   display:none;
}

    <select> 
        <option value="">Please select</option> 
        <option value="1">1</option>    
        <option value="2">2</option>    
        <option value="3">3</option>    
       </select>

Answer 5

我认为您不需要为此添加任何 css。如果您需要第一个选项为空，则删除 请 Select .i.e.,

<select> 
    <option value=""></option> 
    <option value="1">1</option>    
    <option value="2">2</option>    
    <option value="3">3</option>    
 </select>

如果您希望框内有一些间距，即使文本已被删除，您也可以添加几次以使面板看起来足够宽，如下所示。

<select> 
    <option value="">&nbsp;&nbsp;&nbsp;&nbsp;</option> 
    <option value="1">1</option>    
    <option value="2">2</option>    
    <option value="3">3</option>    
 </select>

Answer 6

您可以使用媒体查询来处理小型设备和电话：

/* you can set any width you want */
@media (max-width: 400px) {
  select option:first-child {
    display: none;
  }
}

Answer 7

 <select>
         <option style="display:none;">Please select</option> 
         <option value="1">one</option>
         <option value="2">two</option>
         <option value="3">three</option>
         <option value="4">four</option>
    </select>

谢谢...:)

无法使第一个 <option> 不可见

Cant make the first <option> invisible

css

css-selectors

html-select