Зарегистрирован/Connected динамических выпадающие

Question

Привет StackOverflow ветеранов,

Я изо всех сил на некоторое время с небольшой функцию ввода безопасности. По сути, для моего веб-сайта пользователи смогут выбрать время, которое они хотят начать, и закончить утреннюю смену.

У меня есть два входа Select, которые заполняются date внутри цикла. В основном, то, что я пытался (зря) достичь, заключается в том, что когда кто-то выбирает дату начала из раскрывающегося списка «Время начала», выпадающее меню «Конечное время» имеет все значения меньше, чем «Время начала», отключено.

Я предоставил изображение ниже, чтобы помочь объяснить немного лучше, и текущий код, который у меня есть, также касается того, как работает мой select.

Что касается любого прогресса на Javascript, там в принципе нет. Все, что я пробовал, никоим образом не работает, и я начинаю бороться с новыми идеями. Я потратил много времени на поиск решений здесь, на StackOverflow, но я мог искать неправильные ключевые слова.

The start time has been selected on the Left Dropdown, at 07:00, but on the Right Dropdown, anything before 07:00 should now be removed/disabled.

<select id="mondayWorking_MorningStart" class="workInput" > 
    <?php 
    $tStart = strtotime($start); 
    $tEnd = strtotime($end); 
    $tNow = $tStart; 

    while($tNow <= $tEnd) 
    { 
     echo "<option id='monday_MorningStart' name='mondayMorningStart'>" . date("H:i",$tNow) . "</option>"; 
     $tNow = strtotime('+30 minutes',$tNow); 
    } 
    ?> 
</select> 

Спасибо за вашу помощь,

Если вам нужно что-нибудь еще, чтобы предложить свою помощь, пожалуйста, дайте мне знать!

Answer 1

Чтобы заполнить второе раскрывающееся меню, основанное на первостепенном значении, сначала необходимо привязать событие onChange к первому выпадающему списку. Это означает, что при изменении первого раскрывающегося списка и выборе другого варианта JavaScript (в нашем случае jquery) запускает событие и запускает код.

В этой функции (код) мы получаем значение первого раскрывающегося списка, затем очищаем параметры второго раскрывающегося списка и добавляем содержимое второго раскрывающегося списка на основе первого раскрывающегося списка.

Я предположил, что второе выпадающее значение макса может быть 24:00 и минимальное значение должно быть равно первые раскрывающимся значение + 30 минут ...

Я только добавил несколько вариантов первый выбора для контрольная работа. вы загружаете ее с кодом PHP, и это не имеет никакого значения ...

Так что код будет выглядеть следующим образом:

$('#selStart').change(function(){ 
 
    var arrTimeStart = $(this).val().split(":"); 
 
    var timeStart = parseInt(arrTimeStart[0] * 60) + parseInt(arrTimeStart[1]); 
 
    timeStart = timeStart + 30; 
 
    var timeEnd = (24 * 60); 
 
    
 
    $('#selEnd').find('option').remove(); 
 
    for (iCnt = timeStart; iCnt <= timeEnd; iCnt = iCnt + 30){ 
 
    vHour = parseInt(iCnt/60); 
 
    vMin = iCnt % 60; 
 
    if(vMin == 0) 
 
     vMin = '00'; 
 
    tmpTime = vHour + ':' + vMin; 
 
    $('#selEnd').append('<option value='+tmpTime+'>'+tmpTime+'</option>'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Start: 
 
<select id="selStart"> 
 
    <option value="00:00">00:00</option> 
 
    <option value="00:30">00:30</option> 
 
    <option value="01:00">01:00</option> 
 
    <option value="01:30">01:30</option> 
 
    <option value="02:00">02:00</option> 
 
    <option value="02:30">02:30</option> 
 
    <option value="03:00">03:00</option> 
 
    <option value="03:30">03:30</option> 
 
    <option value="04:00">04:00</option> 
 
    <option value="04:30">04:30</option> 
 
</select> 
 
<br> 
 
End: 
 
<select id="selEnd"></select>