値が変更された場合、ドロップダウンをリセットする方法は？

Question

私は3つのドロップダウンボックスがある私のプロジェクトに取り組んでいます。ユーザーは、開始時刻、会議長、終了時刻を選択できます。私の機能はうまく動作しますが、もう一つは欠けています。ユーザーが3つのドロップダウンをすべて選択すると、最後のドロップダウンですべての終了時間が得られますが、今度はミーティングの長さや開始時間、終了時間ドロップボックス有効なレコードで値を与える必要があります。彼らはすべてを一度選択した場合、現在のコードは正常に動作しますが、開始時間や会議の長さが変わっても、終了時間は変わりません。

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

が、私はこのようなもので、私の機能をリセットしようとしました：： はここに私の作業例とjsfiddleである私の既存の関数の内部

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

が、それは助けにはなりませんでした。私の開始時間と会合の長さのドロップダウンで値を変更した後、毎回自分の機能をリフレッシュする方法を知っている人は、私に教えてください。

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

あなたは値を設定するかしたい：インデックスは0

で始めることを覚えておいてください

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

：

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

またはインデックスを選択します

これは、すべての終了時間オプションを設定するwhileループの後に行います。

Answer 2

あなたは `$持っている場合はjsfiddleにonloadイベントを使用しない、一つはコード

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

//FirstIndexValue= #etime default value