在选择框中删除“默认”<选项>
这是我的选择框：
<select id="category">
<option value="">Pick a choice!</option>
<option value="">choice1</option>
<option value="">choice2</option>
<option value="">choice3</option>
<option value="">choice4</option>
</select>
我想Pick a choice! 选项在用户点击选择框时被删除。 如果用户点击其他任何地方，则Pick a choice! 选项回来。 我不希望用户能够选择Pick a choice! 选项。 我该怎么办？
如果没有一些PHP或JavaScript来动态地删除选项，你会有另一个非常简单的选项，我经常使用，这是disabled="disabled"选项。 该选项将保留，但用户将无法真正选择它。
这样做的失败在于某人只是提交表单而没有选择任何空值将在表单中提交的任何内容，但这是验证处理的起点。
你的代码为“选择一个选择！” 选项将如下所示：
<option disabled="disabled">Pick a choice!</option>
我希望它有帮助。
CSS只有Sol'n
所以，我知道这篇文章现在已经很老了，但是只提供了一个css解决方案......实现这一点的效率更高。 注意第一个<option>没有value属性; 这使它可以有效地放置。
#category:focus option:first-of-type {
display: none;
}<select id="category">
<option>Pick a choice!</option>
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
<option value="choice3">choice3</option>
<option value="choice3">choice4</option>
</select>这是一些解决方法。 不知道这是你的要求套件。
<html>
<head>
<title>Untitled Document</title>
<script>
function doremove()
{
var obj=document.getElementById("category");
obj.remove(0);
}
function addOpt()
{
var obj=document.getElementById("category");
var option=document.createElement("option");
option.text="Pick a choice!";
option.value = 0;
obj.add(option,1);
obj.value = 0;
}
</script>
</head>
<body>
<select id="category" onfocus="doremove();" onblur="addOpt();">
<option value="0">Pick a choice!</option>
<option value="">choice1</option>
<option value="">choice2</option>
<option value="">choice3</option>
<option value="">choice4</option>
</select>
<input type="text" />
</body>
</html>