Загрузить выпадающий элемент, но отключить для выбора

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>