Форум

miltorg · #1 (**permalink**) 19.09.2019, 23:47

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

Спасибо.

miltorg · #2 (**permalink**) 20.09.2019, 00:50

Пожалуйста

<!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>

miltorg · #3 (**permalink**) 20.09.2019, 01:27

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

miltorg · #4 (**permalink**) 20.09.2019, 02:06

И ещё:

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

miltorg · #5 (**permalink**) 20.09.2019, 03:03

<!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>

рони · #6 (**permalink**) 20.09.2019, 14:33

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>

miltorg · #7 (**permalink**) 20.09.2019, 15:34

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

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

рони · #8 (**permalink**) 20.09.2019, 17:02

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

Форум

Справочник

Discord чат

Курсы javascript