Show "Placeholder" in HTML Select when no option is chosen

Question

I add a "Placeholder" to a an existing select. When I select any option and then pick the blank item , the placeholder is not shown anymore. How to always show it whenever no option is selected?

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

Does this answer your question? [A Placeholder for the \`select\` tag?](https://stackoverflow.com/questions/8368847/a-placeholder-for-the-select-tag) — biberman, May 30 '21 at 11:22
@smolo i answered your question since it seems to be no duplicate - please give a feedback. — biberman, Jun 10 '21 at 11:29

score 0 · Answer 1 · answered May 30 '21 at 11:22

You merged disabled and hidden together. Therefor the placeholder is in the list of options not selectable and not visible. If you just want it to be visible omit hidden. If you also want to reselect the placeholder omit both.

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

Show "Placeholder" in HTML Select when no option is chosen

1 Answers1