What I want to achieve is after a user selects an option, the input would then display "select another option" instead of display the value name of the selected option.
Basic example:
<select>
<option value="" selected>Select an Option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Attach a change event listener to the select that checks whether this is the first time the user selected an option. If it is, you can set the value to "" and set the textContent of the selected option to "Select another option."
const select = document.querySelector('select');
var isFirst = true;
select.addEventListener('change', function() {
if (isFirst) {
select.value = "";
select.options[select.selectedIndex].textContent = "select another option";
isFirst = false
}
})<select>
<option value="" selected>Select an Option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>If you want to do it everytime the user selects an option:
const select = document.querySelector('select');
select.addEventListener('change', function() {
select.value = "";
select.options[select.selectedIndex].textContent = "select another option";
})<select>
<option value="" selected>Select an Option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>