加载下拉项，但禁用选择

Question

所以我希望能够加载"选择"下拉选项，但在下拉列表中进行更改后立即禁用它。

我尝试在选择中添加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>