Как сделать неактивными все option, значение которых меньше сегодняшнего числа?

Question

[atreu1s]

<select name="Date" class="select_Date" id="Dateselect" >
                    <option value="0" disabled selected >Дата</option>
                    <option value="1">1 Окт.</option>
                    <option value="2">2 Окт.</option>
                    <option value="3">3 Окт.</option>
                    <option value="4">4 Окт.</option>
                    <option value="5">5 Окт.</option>
                    <option value="6">6 Окт.</option>
                    <option value="7">7 Окт.</option>
                    <option value="8">8 Окт.</option>
                    <option value="9">9 Окт.</option>
                    <option value="10">10 Окт.</option>
                    <option value="11">11 Окт.</option>
                    <option value="12">12 Окт.</option>
                    <option value="13">13 Окт.</option>
                    <option value="14">14 Окт.</option>
                    <option value="15">15 Окт.</option>
                    <option value="16">16 Окт.</option>
                    <option value="17">17 Окт.</option>
                    <option value="18">18 Окт.</option>
                    <option value="19">19 Окт.</option>
                    <option value="20">20 Окт.</option>
                    <option value="21">21 Окт.</option>
                    <option value="22">22 Окт.</option>
                    <option value="23">23 Окт.</option>
                    <option value="24">24 Окт.</option>
                    <option value="25">25 Окт.</option>
                    <option value="26">26 Окт.</option>
                    <option value="27">27 Окт.</option>
                    <option value="28">28 Окт.</option>
                    <option value="29">29 Окт.</option>
                    <option value="30">30 Окт.</option>
                    <option value="31">31 Окт.</option>
                </select>

Answer 1

[0xD34F]

Какое сегодня число, о каком select'е идёт речь и как обновлять состояние его option'ов:

const today = new Date().getDate();
const select = document.querySelector('select');
const toggle = option => option.disabled = option.value < today;

Обновляем:

select.querySelectorAll('option').forEach(toggle);

// или

Array.prototype.forEach.call(select, toggle);

// или

for (const n of select.options) {
  toggle(n);
}

// или

for (let i = 0; i < select.children.length; i++) {
  toggle(select.children[i]);
}

Comments

[atreu1s]

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

Answer 2

[atreu1s]

Немного доработал решение

<select name="Date" class="select_Date" id="Dateselect">
                    <option id="date_opt" value="0" disabled selected >Дата</option>
                    <option id="date_opt" value="1">1 Окт.</option>
                    <option id="date_opt" value="2">2 Окт.</option>
                    <option id="date_opt" value="3">3 Окт.</option>
                    <option id="date_opt" value="4">4 Окт.</option>
                    <option id="date_opt" value="5">5 Окт.</option>
                    <option id="date_opt" value="6">6 Окт.</option>
                    <option id="date_opt" value="7">7 Окт.</option>
                    <option id="date_opt" value="8">8 Окт.</option>
                    <option id="date_opt" value="9">9 Окт.</option>
                    <option id="date_opt" value="10">10 Окт.</option>
                    <option id="date_opt" value="11">11 Окт.</option>
                    <option id="date_opt" value="12">12 Окт.</option>
                    <option id="date_opt" value="13">13 Окт.</option>
                    <option id="date_opt" value="14">14 Окт.</option>
                    <option id="date_opt" value="15">15 Окт.</option>
                    <option id="date_opt" value="16">16 Окт.</option>
                    <option id="date_opt" value="17">17 Окт.</option>
                    <option id="date_opt" value="18">18 Окт.</option>
                    <option id="date_opt" value="19">19 Окт.</option>
                    <option id="date_opt" value="20">20 Окт.</option>
                    <option id="date_opt" value="21">21 Окт.</option>
                    <option id="date_opt" value="22">22 Окт.</option>
                    <option id="date_opt" value="23">23 Окт.</option>
                    <option id="date_opt" value="24">24 Окт.</option>
                    <option id="date_opt" value="25">25 Окт.</option>
                    <option id="date_opt" value="26">26 Окт.</option>
                    <option id="date_opt" value="27">27 Окт.</option>
                    <option id="date_opt" value="28">28 Окт.</option>
                    <option id="date_opt" value="29">29 Окт.</option>
                    <option id="date_opt" value="30">30 Окт.</option>
                    <option id="date_opt" value="31">31 Окт.</option>
                </select>

const today = new Date().getDate();
    document.querySelectorAll('#date_opt').forEach(n => n.disabled = n.value < today);

Comments

[ArtemNA]

Решение то работает, но сделано с грубейшей ошибкой(нельзя иметь одинаковые id) либо сделайте через классы, либо же можно ограничить поиск селекторов по родителю:

const today = new Date().getDate();
const parent = document.querySelector('#Dateselect');
parent.querySelectorAll('option').forEach(n => n.disabled = n.value < today);