这是我的选择框：
<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的解决方案......更有效的方法来实现这一目标。注意第一个<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>
试试这个
$("#SelectID option:first").remove();