如果值发生变化，如何重置下拉列表？

Question

我正在处理我的项目，其中有三个下拉框。用户可以选择开始时间、会议时长和结束时间。我的功能工作正常，但我还缺少一件事，所以如果用户 select 所有三个下拉菜单，他们将在最后一个下拉菜单中获得所有结束时间，但现在我想如果他们更改会议长度或开始时间，我的结束时间下拉框应该为他们提供有效记录的值。如果他们 select 一切一次，当前代码工作正常，但如果他们改变开始时间或会议长度，我的结束时间仍然相同。这是我的 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");

或select索引：

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

记住索引从 0 开始。

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

Answer 2

请尝试以下代码

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

//FirstIndexValue= #etime default value

如果值发生变化，如何重置下拉列表？

How to reset drop down if value change?

javascript

jquery

onchange

drop-down-menu