从选择选项中删除选项值

Question

我的代码是：

<select>
<option>Options</option>
<option>Settings</option>
</select>

＆＃34;选项＆＃34; value是我列表中的默认值。如果我们查看列表＆＃34;选项＆＃34;值不需要显示。有可能的？？任何人都可以回答这个问题。请看图片。

Answer 1

你可以用CSS

来做到这一点

只需在该选项上设置display:none

<强> FIDDLE

<select>
    <option style='display: none;'>Options</option>
    <option>Settings 1</option>
    <option>Settings 2</option>
    <option>Settings 3</option>
</select>

之所以这样做是因为选择框中显示的选项不是实际的选项元素本身，它只是所选选项的副本。

（提示：看看OP发布的图片）

现在默认情况下，第一个选项是选中的 - 所以 it 会显示在选择框中，但是当您打开选择框时 - 您不会将其视为选项 - 因为它有display:none。同样，如果你选择一个选项 - 你将不会再看到第一个 - 因为没有办法选择它。

Answer 2

您可以默认隐藏它：

$('select option:eq(0)').hide();

<强> Fiddle Demo

或使用纯CSS：

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

<强> Fiddle Demo

Answer 3

在jquery中使用：contains 选择器

$("select option:contains(Options)").remove();

Fiddle

Answer 4

可能你想要这样的东西：

$('select').on('change click focus', function () {
    $('option:first', this).hide();
}).on('blur', function () {
    $('option:first', this).show();
});

Fiddle