加载下拉项，但无法选择

Question

因此，我希望能够加载'Choose'下拉选项，但是在下拉列表上进行更改后立即将其禁用。

我尝试在所选内容上添加disabled属性标签，但该标签加载在“阿拉巴马州”上，我不希望这样。

我将如何解决这个问题？

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

Answer 1

将hidden和selected添加到第一个选项应该可以解决问题。

<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 hidden selected value="">Choose...</option>
            <option>Alabama</option>
            <option>Alaska</option>
            <option>Colorado</option>
            <option>New York</option>
            <option>South Dakota</option>
        </select>
        <div class="invalid-feedback">
            Select state of residence.
        </div>
    </div>
</div>

如果用户选择后仍然想看到“选择...”，请用hidden替换disabled。

Answer 2

为什么不禁用第一个选项？ （不需要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>

以及它的演示代码片段：

<select required>
    <option value="" disabled selected>Select your option</option>
    <option value="1">Alabama</option>
    <option value="2">Alaska</option>
    <option value="3">...</option>
</select>