Select first option attributes

Bootstrap Studio Help
1

Hi, i’m trying to find a way to add the attributes “disabled selected hidden” to the first option in a select element. How would i do this without going to manually edit it in an external editor? If i do it in an external editor, wouldn’t it be overwritten next time i edit something inside bootstrap editor?

2

If it is disabled and hidden, then it doesn’t really serve a purpose that I can think of.

One way you could do it is using some js:

const selectElements = document.getElementsByClassName("mySelect");
const selectElement = selectElements[0];  
const firstOption = selectElement.options[0];
firstOption.disabled = true;
3

Thank you for your reply. I ended up using js to populate the options which i thought i could avoid. The goal was to have a preselected option like “Select…” which would you not be able to return to after making a selection because it would be greyed out. Something like a placeholder in an input field. Maybe i’m going about it the wrong way but it works.

4

The easiest way is to have no value on your first option (Choose option) and turn on required. Of course if the field isn’t required then this will not work.

<select class="form-select" required>
    <option value selected>Choose option</option>
    <option value="13">This is item 2</option>
    <option value="14">This is item 3</option>
</select>
5

Yes, this works too. The small detail is that this way it is re-selectable which i don’t want.

When i add the extra attributes like this:

<select class="form-select" required>
    <option value="" disabled selected hidden>Choose option</option>
    <option value="13">This is item 2</option>
    <option value="14">This is item 3</option>
</select>

If a user selects an option then returns to change the option, the “Choose option” will be greyed out and not selectable.

The scenario is that if the user returns to change the first selected option, he selects by mistake the “Choose option” and realises it when he clicks submit which would cost some time when submitting.

6

You can have a label with Choose option
no need for javascript

<div class="d-flex flex-column">
	<label class="form-label" for="sel">Choose option</label>
	<select id="sel" class="form-select" required>
		<option value="12" selected>This is item 1</option>
		<option value="13">This is item 2</option>
		<option value="14">This is item 3</option>
	</select>
</div>