未选择任何选项时在 HTML 选择中显示“占位符”

Question

我将“占位符”添加到现有选择中。当我选择任何选项然后选择空白项目时，占位符不再显示。如何在未选择任何选项时始终显示它？

var l = $("#my_select");
if (l.val() === '') {
    l.append($('<option>', { value: 1, text: 'Some Placeholder', disabled : true, selected: true, hidden: true }))
}

Answer 1

您将disabled 和hidden 合并在一起。因此，占位符位于不可选择且不可见的选项列表中。如果您只想让它可见，请忽略 hidden。如果您还想重新选择占位符，请忽略两者。

<select id="selected">
  <option value="" selected>placeholder</option>
  <option value="1">troet</option>
  <option value="2">quak</option>
</select>
<label for="selected">selected</label>
<br>
<select id="disabled">
  <option value="" selected disabled>placeholder</option>
  <option value="1">troet</option>
  <option value="2">quak</option>
</select>
<label for="disabled">disabled</label>
<br>
<select id="hidden">
  <option value="" selected hidden>placeholder</option>
  <option value="1">troet</option>
  <option value="2">quak</option>
</select>
<label for="hidden">hidden</label>