Javascript-форум - Связанные (зависимые) выпадающие списки

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Связанные (зависимые) выпадающие списки (https://javascript.ru/forum/misc/78479-svyazannye-zavisimye-vypadayushhie-spiski.html)

Связанные (зависимые) выпадающие списки

После "от" и "до" выпадающие списки со значениями от 1 до 24.
Должно быть возможным выбрать значение "до" только большее чем значение "от" и наоборот.
Т.е. если к примеру выбрано значение "от" 6, то в списке "до" остаются для выбора значения от 7 до 24

Спасибо.

Пожалуйста

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<script>

function svjazannoe_pole(v){

var el = document.getElementById('prijom_do');
while(el.childNodes.length>0){el.removeChild(el.ch ildNodes[el.childNodes.length-1]);}

v=+v+1;
for(var i=v;i<25;i++){
var opt = document.createElement("option");
opt.innerHTML= i;
el.appendChild(opt);
}
}
</script>
</head>

<body>
<form name="" action="" method="get">

<select name="prijom_ot" id="prijom_ot" onchange="svjazannoe_pole(this.value)">
<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>
</select>

<select id="prijom_do" name="prijom_do">

</select>

<input type="submit" value="Send">
</form>

</body>
</html>

В первый список я select допишу где надо.
А вот во второй как?
Спасибо.

И ещё:

14б. Тоже самое надо сделать ниже для "Возможное время отправки гостей от до" ("Possible time for sending guests from to")
Здесь дополнительно значение "от" должно быть больше или равно значению "до" из списка приёма гостей

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
<script>

function svjazannoe_pole(v){

    var el = document.getElementById('prijom_do');
    while(el.childNodes.length>0){el.removeChild(el.childNodes[el.childNodes.length-1]);}

    v=+v+1;
    for(var i=v;i<25;i++){
        var opt = document.createElement("option");
        opt.innerHTML= i;
        el.appendChild(opt);
        }


    var el = document.getElementById('otpravka_ot');
    while(el.childNodes.length>0){el.removeChild(el.childNodes[el.childNodes.length-1]);}


    for(var i=0;i<v;i++){
        var opt = document.createElement("option");
        opt.innerHTML= i;
        el.appendChild(opt);
        }

    var el = document.getElementById('otpravka_do');
    while(el.childNodes.length>0){el.removeChild(el.childNodes[el.childNodes.length-1]);}




}

function svjazannoe_pole2(v){

    var el = document.getElementById('otpravka_do');
    while(el.childNodes.length>0){el.removeChild(el.childNodes[el.childNodes.length-1]);}

    v=+v+1;

var e = document.getElementById("prijom_ot");
var p = +e.options[e.selectedIndex].value + 1;

    for(var i=v; i < p; i++){
        var opt = document.createElement("option");
        opt.innerHTML= i;
        el.appendChild(opt);
        }





}

</script>
</head>

<body>
<form>


<select name="prijom_ot" id="prijom_ot" onchange="svjazannoe_pole(this.value)">
    <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>
</select>

<select id="prijom_do" name="prijom_do">
</select>

<select id="otpravka_ot" name="otpravka_ot" onchange="svjazannoe_pole2(this.value)">
</select>

<select id="otpravka_do" name="otpravka_do">
</select>

<input type="submit" value="Send">
</form>


</body>
</html>

зависимые селекты

miltorg,

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
    <label>от<select size="24"></select></label>
    <label>до<select size="24"></select></label>

<script>
window.addEventListener("DOMContentLoaded", function() {
    class limitSelect {
        constructor(select, last = 24, first = 1) {
            this.select = select;
            this.last = last;
            this.first = first
            this.max = last;
            this.min = first;
            this.createOption();
            this.select.value = first;
            this.select[Symbol.for("limit")] = this;
        }
        createOption() {
            const options = this.select.options;
            options.length = 0;
            for (let i = this.min; i <= this.max; i++) {
                options[options.length] = new Option(i, i)
            }
        }
        set high(number) {
            this.max = Math.min(this.last, number);
            let value = this.select.value;
            this.createOption();
            value = Math.min(value, this.max);
            this.select.value = value;
        }
        set low(number) {
            this.min = Math.max(this.first, number);
            let value = this.select.value;
            this.createOption();
            value = Math.max(value, this.min);
            this.select.value = value;

        }
    }
    const [from, to] = document.querySelectorAll("select");
    [from, to].map((select) => new limitSelect(select));

    from.addEventListener("change", function() {
        to[Symbol.for("limit")].low = +this.value + 1
    })


    to.addEventListener("change", function() {
        from[Symbol.for("limit")].high = this.value - 1
    })
    let event = new Event("change");
    from.dispatchEvent(event);
    to.value = 24;
    to.dispatchEvent(event);
})
</script>

</body>

</html>

Чем плохое моё решение? Оно вроде покороче.

Пока спал - придумал как делать Селект - просто через PHP первоначально выводить одну, нужную строку

miltorg,
это был один из возможных вариантов.