无法使第一个 <option> 不可见
Cant make the first <option> invisible
我有一个 <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>
谢谢。
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>
您可以将其设置为 display: none;
唯一的问题是,它在 Internet Explorer 中不起作用(惊喜!)
或者将 <option>
留空...
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;" />');
}
};
这是一个适合你的工作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>
我认为您不需要为此添加任何 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=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
您可以使用媒体查询来处理小型设备和电话:
/* you can set any width you want */
@media (max-width: 400px) {
select option:first-child {
display: none;
}
}
<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>
谢谢...:)
我有一个 <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>
谢谢。
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>
您可以将其设置为 display: none;
唯一的问题是,它在 Internet Explorer 中不起作用(惊喜!)
或者将 <option>
留空...
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;" />');
}
};
这是一个适合你的工作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>
我认为您不需要为此添加任何 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=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
您可以使用媒体查询来处理小型设备和电话:
/* you can set any width you want */
@media (max-width: 400px) {
select option:first-child {
display: none;
}
}
<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>
谢谢...:)