Question

我在我的项目上工作，我有三个下拉框。用户可以选择开始时间，会议时长和结束时间。我的功能运行正常，但我又错过了一件事，所以如果用户选择了所有三个下拉菜单，他们将在最后一次下拉中获得所有结束时间，但现在我想要他们改变会议长度或开始时间，我的结束时间drop box应该为它们提供有效记录的值。如果当前代码选择了一次，但如果它们改变了开始时间或会议长度，那么当前代码工作正常，我的结束时间仍然相同。这是我的jsfiddle与工作示例：

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

我尝试用以下内容重置我的功能：

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

在我现有的功能中，但没有帮助。如果有人知道我每次更改我的开始时间和满足长度下降值后我可以刷新我的功能，请告诉我。

＆＃13;

$(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);
        }
      }
    }
  });
});

＆＃13;

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

＆＃13;

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

如果值改变，如何重置下拉？

2 个答案: