Bootstrap - Select Part 2: Disabled and Read-Only Select Dropdowns

Bootstrap allows you to disable the select field to prevent user interaction.

Example 1: Disabled Select Dropdown

<div class="form-group">

    <label for="disabledSelect">Disabled Select</label>

    <select class="form-select" id="disabledSelect" disabled>

        <option selected>Cannot Select</option>

        <option value="1">Option A</option>

        <option value="2">Option B</option>

    </select>

</div>

Explanation:

Adding the disabled attribute makes the dropdown unclickable.

Useful when selections should be locked based on conditions.

Example 2: Read-Only Effect (Using JavaScript)

If you need a read-only effect (but keep the field visible), use JavaScript:

<select class="form-select" id="readonlySelect">

    <option selected>Pre-selected option</option>

    <option value="1">Option A</option>

    <option value="2">Option B</option>

</select>

<script>

    document.getElementById("readonlySelect").onfocus = function() {

        this.blur(); // Prevents editing

    };

</script>

This prevents users from changing the selection while keeping the field visible.