Javascript 如何隐藏SELECT中的第一个选项

发布于12月11日

我想隐藏"Day"选项.只有在未 Select 任何内容的情况下才应显示该选项.

<select id="day" name="day">
    <option disabled selected>Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

目前的情况:https://imgur.com/a/tK3bHDX

我try 在第一个选项中添加"隐藏"，但也不起作用.我使用Safari作为我的网络浏览器.也许这就是我不知道的原因.

<option disabled selected hidden>Day</option>

推荐答案

这是你需要的东西吗？使用querySelector获取禁用选项的元素并进行比较，如果 Select 了另一个选项，则将其隐藏

function handleDayChange(selectElement) {
    const selectedValue = selectElement.value;
    let dayOption = selectElement.querySelector('option:disabled');

    if (selectedValue !== "") {
        dayOption.style.display = "none";
    } else {
        dayOption.style.display = "";
    }
}

<select id="day" name="day" onchange="handleDayChange(this)">
    <option disabled selected>Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>