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>
