JSFiddle - React, Tailwind, and code Playground

HTML

Re-selectable placeholder<br />
<select>
    <option value="" selected>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select><br />
Hidden placeholder<br />
<select class="empty">
    <option id="what" value="" selected disabled>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

<div id="div">

</div>

CSS

select option {
	color: black;
}
select option:first-child {
	color: grey;
}
select.empty {
	color: grey;
}
/* Hidden placeholder */
select option[disabled]:first-child {
	display: none;
}

JavaScript

// JavaScript toggles the grey color of the control when the placeholder is selected
$("select:has(option[value=]:first-child)").on('change', function() {
  $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');

var elem = document.getElementById("what");
var elem_val = elem.value;

alert(elem_wal);