Zurücksetzen des Dropdown-Menüs, wenn sich der Wert ändert?

Question

Ich arbeite an meinem Projekt, wo ich drei Dropdown-Boxen habe. Benutzer kann Startzeit, Besprechungslänge und Endzeit auswählen. Meine Funktion funktioniert gut, aber ich vermisse noch eine Sache. Wenn der Benutzer also alle drei Dropdown-Menüs auswählt, werden alle Endzeiten in der letzten Drop-Down-Liste angezeigt. Jetzt möchte ich die Meeting-Länge oder Startzeit ändern sollte ihnen Werte mit den gültigen Aufzeichnungen geben. Der aktuelle Code funktioniert gut, wenn sie alles einmal auswählen, aber wenn sie die Startzeit oder die Meetinglänge ändern, ist meine Endzeit immer noch dieselbe. Hier ist meine jsfiddle mit dem Arbeitsbeispiel:

https://jsfiddle.net/dmilos89/vy0yy7h9/4/

Ich versuchte, meine Funktion mit so etwas wie dies zurück:

$('#meet_leng').on('chnage'); 

innerhalb meiner bestehenden Funktion, aber das hat nicht geholfen. Wenn jemand weiß, wie ich meine Funktion jedes Mal aktualisieren kann, nachdem ich die Werte für die Startzeit und die Länge der Meetinglänge geändert habe, lassen Sie es mich wissen.

$(function() { 
 
    //This loop populate values fro meeting length dropdown 
 
    for (var i = 5; i <= 60; i += 5) { 
 
    $('#meet_leng').append('<option value="' + i + '">' + i + ' min' + '</option>') 
 
    } 
 

 
    //Populate start time dropdown with values 
 
    for (var i = 700; i <= 1700; i += 15) { 
 
    var mins = i % 100; 
 
    var hours = parseInt(i/100); 
 

 
    if (mins > 45) { 
 
     mins = 0; 
 
     hours += 1; 
 
     i = hours * 100; 
 
    } 
 

 
    var AmPm = " AM"; 
 
    //set hours 12 to PM 
 
    if (hours == 12) { 
 
     AmPm = " PM"; 
 
    } 
 

 
    //format all hours greater than to PM 
 
    if (hours > 12) { 
 
     hours = hours - 12; 
 
     AmPm = " PM"; 
 
    } 
 

 
    //populate stime with values 
 
    $('#stime').append('<option value="' + ('0' + (hours)).slice(-2) + ':' + ('0' + mins).slice(-2) + AmPm + '">' + ('0' + (hours)).slice(-2) + ':' + ('0' + mins).slice(-2) + AmPm + ' </option>') 
 
    } 
 

 
    //onChange function set end time based on start time and meeting length 
 
    $('#meet_leng').on('change', function() { 
 
    if ($('#stime').val() == '0') { 
 
     alert('You have to pick start time first.') 
 
    } else { 
 
     if ($('#meet_leng').val() == '0') { 
 
     $('#hideSlots').hide(); 
 
     } else { 
 
     //convert variables for start and end time to new Date 
 
     var time1 = new Date(); 
 
     var time2 = new Date(); 
 

 
     //meeting length converts to int 
 
     var meetingLength = parseInt($('#meet_leng').val()); 
 

 
     //start time split into hours and minutes 
 
     var startTime = $('#stime').val(); 
 
     var startHour = startTime.split(':')[0]; 
 
     var startMin = startTime.split(':')[1].replace(/AM|PM/gi, ''); 
 

 
     //end time split into hours and minutes 
 
     var endTime = '05:00 PM'; 
 
     var endHour = endTime.split(':')[0]; 
 
     var endMin = endTime.split(':')[1].replace(/AM|PM/gi, ''); 
 

 
     //Check if start time is PM and adjust hours to military 
 
     if (startTime.indexOf('PM') > -1) { 
 
      if (startHour != 12) { 
 
      startHour = parseInt(startHour) + 12; 
 
      } else { 
 
      startHour = parseInt(startHour); 
 
      } 
 
     } 
 

 
     //Check if end time is PM and adjust hours to military 
 
     if (endTime.indexOf('PM') > -1) { 
 
      endHour = parseInt(endHour) + 12; 
 
     } 
 

 
     //Date API start time set hours and minutes 
 
     time1.setHours(parseInt(startHour)); 
 
     time1.setMinutes(parseInt(startMin)); 
 

 
     //Date API end time set hours and minutes 
 
     time2.setHours(parseInt(endHour)); 
 
     time2.setMinutes(parseInt(endMin)); 
 

 
     //Adding meeting length to start time 
 
     time1.setMinutes(time1.getMinutes() + meetingLength); 
 

 
     //while loop checks for time values and increment end time for meeting interval 
 
     while (time1 <= time2) { 
 
      var amPm = " AM"; 
 
      var hourEnd = time1.getHours(); 
 
      var minEnd = time1.getMinutes(); 
 

 
      if (hourEnd >= 12) { 
 
      hourEnd = (hourEnd == 12) ? hourEnd : hourEnd - 12; 
 
      amPm = " PM"; 
 
      } 
 

 
      if (hourEnd == 24) { 
 
      hourEnd = 12; 
 
      } 
 

 
      minEnd = ('' + minEnd).length > 1 ? minEnd : '0' + minEnd; 
 

 
      $('#etime').append('<option value="' + hourEnd + ':' + minEnd + ' ' + amPm + '">' + hourEnd + ':' + minEnd + ' ' + amPm + '</option>'); 
 
      time1.setMinutes(time1.getMinutes() + meetingLength); 
 
     } 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <th>Start Time:</th> 
 
    <td> 
 
    <select name="stime" id="stime"> 
 
     <option value="0">--Select start time--</option> 
 
    </select> 
 
    </td> 
 
</tr> 
 
<br/> 
 
<tr> 
 
    <th>Metting Length:</th> 
 
    <td> 
 
    <select name="meet_leng" id="meet_leng"> 
 
     <option value="0">--Select length--</option> 
 
    </select> 
 
    </td> 
 
</tr> 
 
<br/> 
 
<tr> 
 
    <th>End Time:</th> 
 
    <td> 
 
    <select name="etime" id="etime" /> 
 
    <option value="0">--Select end time--</option> 
 
    </select> 
 
    </td> 
 
</tr>

Answer 1

Sie wollen entweder auf den Wert gesetzt:

$('#etime').val("new value"); 

oder den Index wählen:

$('#etime').get(0).selectedIndex = 1; 

daran erinnern, dass Indizes bei 0

starten

Sie würden dies nach der while-Schleife tun, die alle Endzeitoptionen auffüllt.

Answer 2

Bitte versuchen Sie es unter Code

 $('#meet_leng').on('chnage',function(){ 
      $('#etime').val("FirstIndexValue") 
     }); 

//FirstIndexValue= #etime default value