CSS Only Sol'n

Question

这是我的选择框：

<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!选项。我该怎么办？

Answer 1

CSS Only Sol'n

所以，我知道这篇文章现在已经很老了，但是没有提供仅限css的解决方案......更有效的方法来实现这一目标。请注意，第一个 <option> 没有值属性;这可以让它有效地占据。

#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>

Answer 2

如果没有动态删除选项的PHP或JavaScript，您会有另一个我经常使用的非常简单的选项，这是disabled="disabled"选项。该选项将保留，但用户无法实际选择它。

如果有人只提交表单而没有选择任何表格中提交的空值，那么这就是你的验证处理发挥作用的地方。

您的代码＆＃34;选择一个选项！＆＃34;选项看起来像这样：

<option disabled="disabled">Pick a choice!</option>

我希望它有所帮助。

Answer 3

试试这个

$("#SelectID option:first").remove();

Answer 4

以下是一些解决方法。不知道这是否符合您的要求。

<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>

删除选择框中的“默认”<选项> </option>

4 个答案:

CSS Only Sol'n