Dom 加载下拉项但禁用选择

因此，我希望能够加载“选择”下拉选项，但一旦对下拉列表进行更改，就将其禁用

我尝试在选择中添加一个禁用的属性标记，但它会加载到“Alabama”，我不希望这样

我怎样才能解决这个问题

<div class="row mt-3">
    <div class="col-md">
        <label for="resident">I am a resident of:</label>
    </div>
</div>

将“隐藏”和“选定”添加到第一个选项应该可以做到这一点

我是以下地区的居民： 选择 阿拉巴马州 阿拉斯加州 科罗拉多州 纽约 南达科他州 选择居住国。

---

为什么不禁用第一个选项？不需要javascript，结果就像您想要实现的一样，我认为：

<div class="row mt-3">
    <div class="col-md">
        <label for="resident">I am a resident of:</label>
        <select class="custom-select" id="resident" required>
            <option value="" disabled>Choose...</option>
            <?php foreach (Vars::states() as $abbr => $state): ?>
                <option value="<?= $abbr; ?>"><?= $state; ?></option>
            <?php endforeach; ?>
        </select>
        <div class="invalid-feedback">
            Select state of residence.
        </div>
    </div>
</div>

以及它的演示代码片段：

选择您的选项 阿拉巴马州 阿拉斯加州 ...

---

所以，在选择阿拉巴马州时，它应该被禁用，选择的值应该是什么？另外，一旦你选择了阿拉巴马州，它是否应该显示在选项列表中？很好，它不依赖javascript来运行。