如果值更改，如何重置下拉列表？

Question

我正在处理我的项目，其中有三个下拉框。用户可以选择开始时间、会议长度和结束时间。我的功能工作正常，但我还缺少一件事，所以如果用户选择所有三个下拉菜单，他们将在最后一个下拉菜单中获得所有结束时间，但现在我想要如果他们更改会议长度或开始时间，我的结束时间下拉框应该为他们提供有效记录的值。如果他们选择所有内容一次，则当前代码可以正常工作，但如果他们更改开始时间或会议长度，我的结束时间仍然相同。 这是我的工作示例的 jsfiddle：

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

我试图用这样的方式重置我的功能：

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

您想设置值：

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

或选择索引：

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

记住索引从 0 开始。

您可以在填充所有结束时间选项的 while 循环之后执行此操作。

Answer 2

请尝试以下代码

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

//FirstIndexValue= #etime default value