Показать сообщение отдельно
  #6 (permalink)  
Старый 20.09.2019, 14:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

зависимые селекты
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>
Ответить с цитированием