在selectbox中使用css隐藏选项。

I have the following code and I want to hide the last option of the select box ie option - 3

我有下面的代码，我想隐藏选择框ie选项- 3的最后一个选项。

select[name="test"]:not(optgroup) option:last-child {
  display: none;
}

<select name="test">
  <option value="one">1</option>
  <optgroup label="emails">
    <option value="two">2</option>
  </optgroup>
  <option value="three">3</option>
</select>

But the above CSS code doesn't work.

但是上面的CSS代码不起作用。

Any help is highly appreciated. Thanks in advance.

非常感谢您的帮助。提前谢谢。

4 个解决方案

#1

see my attempt below

请参见下面的我的尝试

select option[value=three] {
  display: none;
}

<select name="test">
  <option value="one">1</option>
  <optgroup label="emails">
    <option value="two">2</option>
  </optgroup>
  <option value="three">3</option>
</select>

#2

Basically what you want is to hide the last direct option child of the select element:

基本上，您想要隐藏select元素的最后一个直接选项子:

select > option:last-child { display: none; }

<select name="test">
    <option value="one">1</option>
    <optgroup label="emails">
    <option value="two">2</option>
    </optgroup>
    <option value="three">3</option>
    </select>

#3

Just a small edit on your CSS. :)

只是在你的CSS上做一个小小的编辑。:)

select[name="test"] > option:last-child { display: none;}

 <select name="test">
    <option value="one">1</option>
    <optgroup label="emails">
    <option value="two">2</option>
    </optgroup>
    <option value="three">3</option>
    </select>

#4

You can also use the value selector like this:

您还可以使用这样的值选择器:

option[value="three"] {
  display: none;
}

<select name="test">
  <option value="one">1</option>
  <optgroup label="emails">
    <option value="two">2</option>
  </optgroup>
  <option value="three">3</option>
</select>

#1