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

Question

我有一个<select>，并且希望第一个选项是隐身的，因为移动版本上的文本没有足够的空间而且它无论如何都被切断了所以我决定让它消失但它不会工作。仅适用于其他选项（在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

您可以将其设置为display: none;仅问题是，它在Internet Explorer中无效（令人惊讶！）

或者只是将<option>留空......

Answer 2

这是一个适合你的工作笨蛋。将其更改为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 3

由于这个原因，我认为你真的不需要添加任何 css 。如果您需要将第一个选项设为空白，请删除请选择 .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 4

＆＃13;

＆＃13;

option:first-child{
	display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用javascript （最佳方式）

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您只想在移动版中隐藏第一个选项，请按照

进行操作

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 5

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 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>

谢谢...：）