Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.09.2019, 23:47
Новичок на форуме
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 6

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

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 20.09.2019, 00:50
Новичок на форуме
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 6

Пожалуйста

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 20.09.2019, 01:27
Новичок на форуме
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 6

В первый список я select допишу где надо.
А вот во второй как?
Спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 20.09.2019, 02:06
Новичок на форуме
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 6

И ещё:

14б. Тоже самое надо сделать ниже для "Возможное время отправки гостей от до" ("Possible time for sending guests from to")
Здесь дополнительно значение "от" должно быть больше или равно значению "до" из списка приёма гостей
Ответить с цитированием
  #5 (permalink)  
Старый 20.09.2019, 03:03
Новичок на форуме
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 6

<!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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

зависимые селекты
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>
Ответить с цитированием
  #7 (permalink)  
Старый 20.09.2019, 15:34
Новичок на форуме
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 6

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

Пока спал - придумал как делать Селект - просто через PHP первоначально выводить одну, нужную строку
Ответить с цитированием
  #8 (permalink)  
Старый 20.09.2019, 17:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

miltorg,
это был один из возможных вариантов.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Связанные выпадающие списки SemyenP Events/DOM/Window 0 12.12.2017 18:53
Связанные выпадающие списки Gunter153 Элементы интерфейса 3 07.04.2017 12:15
Синхронные выпадающие списки Negro Общие вопросы Javascript 4 08.07.2012 21:26
Зависимые списки! DSHA Элементы интерфейса 12 27.06.2012 11:27
Выпадающие списки - динамика Страдающий AJAX и COMET 7 11.09.2009 17:25