Değer değiştiğinde nasıl açılır kapanır?

Question

Projemde üç damla kutusu bulunan projeler üzerinde çalışıyorum. Kullanıcı Başlangıç ​​saatini, Toplantı Uzunluğu ve Bitiş saatini seçebilir. İşlevim iyi çalışıyor ancak bir şey daha kaçırıyorsam, kullanıcı üç açılır düşüşün tümünü seçerse, son açılır kapanışta tüm bitiş zamanlarını alacaklar ancak şimdi toplantı süresini değiştirecek mi yoksa başlama saatini mi değiştireceklerini mi, bitiş saatimi düşür geçerli kayıtlara değer vermelidir. Geçerli kod, her şeyi bir kez seçerse iyi çalışır, ancak başlangıç ​​saatini veya toplantı süresini değiştirirse, bitiş zamanım hala aynıdır.

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

böyle bir şey ile benim işlevini sıfırlamak için çalıştı: İşte benim çalışma örnekle jsfiddle benim mevcut işlev içinde

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

ama yardımcı olmadı. Başlangıç ​​zamanımdaki değerleri değiştirdikten ve uzunluk düşüşleriyle ilgili görüşmelerden sonra her defasında işlevimi nasıl yenileyebileceğimi bilen varsa lütfen bize bildirin.

$(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>

Sen değerini ayarlamak ya istiyoruz

Answer 1

: endeksler 0.

başlayacak unutmayın

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

:

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

veya dizini seçin

bunu, tüm son zaman seçeneklerini dolduran süre döngüsünden sonra yaparsınız.

Answer 2

Eğer bir `$ varsa jsfiddle içinde onload kullanmayın, biri için kod

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

//FirstIndexValue= #etime default value