从$(window).on('load'，function()

Question

我在这里使用了一个稍微修改过的脚本版本，即Select start time between start and end time

脚本

$(window).on('load', function() {

$("select[name='SelectedTime1']").on("change", function(){
    $("select[name='SelectedTime2']").empty();
    var startix = $("select[name='SelectedTime1'] option:selected").index();
    $("select[name='SelectedTime1'] option").each(function(ix, el){
        if (ix >= startix) {
            $(this).clone().appendTo("select[name='SelectedTime2']");
        }
    });
});

    });

用于在页面重新加载后将选定时间保留在每个下拉列表中的脚本。

  function show2(time1) { 
  var success = -1;
  for (var i=0; i < document.frmLocate.SelectedTime1.length; i++) {
    if (document.frmLocate.SelectedTime1.options[i].value == time) 
      success = [i];
  }
  document.frmLocate.SelectedTime1.selectedIndex=success;
}
function show4(time2) { 
  var success = -1;
  for (var i=0; i < document.frmLocate.SelectedTime2.length; i++) {
    if (document.frmLocate.SelectedTime2.options[i].value == time) 
      success = [i];
  }
  document.frmLocate.SelectedTime2.selectedIndex=success;

下拉列表

<label for="SelectedTime1-set">1st Time:
  <select name="SelectedTime1" id="SelectedTime1-set">
    <option>08:00 AM </option>
    <option>09:00 AM</option>
    <option>10:00 AM</option>
    <option>11:00 AM</option>
    <option>12:00 PM</option>
    <option>01:00 PM</option>
    <option>02:00 PM</option>
    <option>03:00 PM</option>
    <option>04:00 PM</option>
    <option>05:00 PM</option>
    <option>06:00 PM</option>
    <option>07:00 PM</option>
    <option>08:00 PM</option>
    <option>09:00 PM</option>
  </select></label>
  &nbsp;
      <label for="SelectedTime2-set">2nd Time:
      <select name="SelectedTime2" id="SelectedTime2-set">
        <option>08:00 AM </option>
        <option>09:00 AM</option>
        <option>10:00 AM</option>
        <option>11:00 AM</option>
        <option>12:00 PM</option>
        <option>01:00 PM</option>
        <option>02:00 PM</option>
        <option>03:00 PM</option>
        <option>04:00 PM</option>
        <option>05:00 PM</option>
        <option>06:00 PM</option>
        <option>07:00 PM</option>
        <option>08:00 PM</option>
    <option>09:00 PM</option>
  </select></label>
  &nbsp;

这两个下拉列表是表单的一部分，表单在执行API请求后提交回页面，SelectedTime2不应位于SelectedTime1之前。

这两个下拉列表具有相同的选项，从上午8点到晚上9点该脚本将隐藏在SelectedTime1中选择的时间之前的SelectedTime2中的时间。

我需要发生的事情:在表单发布后，让SelectedTime2中的早期时间保持隐藏。

post之后，选定的时间仍然保留，但SelectedTime2中较早的时间会取消隐藏。

我希望防止未来的技术支持电话“为什么页面是空白的”，因为他们不关注AM/PM。他们选择第一个下午6点和第二个上午9点，而实际上应该是晚上9点。

谢谢

肖恩

Answer 1

做了一些内务工作，并将2个合并为1个功能

下拉列表

   <label for="StartTime-set">1st Time:
      <select name="StartTime" id="StartTime-set" onchange="setEndDate()">
        <option>08:00 AM </option>
        <option>09:00 AM</option>
        <option>10:00 AM</option>
        <option>11:00 AM</option>
        <option>12:00 PM</option>
        <option>01:00 PM</option>
        <option>02:00 PM</option>
        <option>03:00 PM</option>
        <option>04:00 PM</option>
        <option>05:00 PM</option>
        <option>06:00 PM</option>
        <option>07:00 PM</option>
        <option>08:00 PM</option>
        <option>09:00 PM</option>
      </select>
    </label>
    &nbsp;
    <label for="EndTime-set">2nd Time:
      <select name="EndTime" id="EndTime-set">
        <option>08:00 AM </option>
        <option>09:00 AM</option>
        <option>10:00 AM</option>
        <option>11:00 AM</option>
        <option>12:00 PM</option>
        <option>01:00 PM</option>
        <option>02:00 PM</option>
        <option>03:00 PM</option>
        <option>04:00 PM</option>
        <option>05:00 PM</option>
        <option>06:00 PM</option>
        <option>07:00 PM</option>
        <option>08:00 PM</option>
        <option>09:00 PM</option>
      </select>
    </label>

函数

function setEndDate() { 

    $("select[name='EndTime']").empty();
    var startix = $("select[name='StartTime'] option:selected").index();
    $("select[name='StartTime'] option").each(function(ix, el){
        if (ix >= startix) {
            $(this).clone().appendTo("select[name='EndTime']");
        }

}); 
  var success = -1;
  for (var i=0; i < document.frmLocate.EndTime.length; i++) {
    if (document.frmLocate.EndTime.options[i].value == endTime) 
      success = [i];
  }
  document.frmLocate.EndTime.selectedIndex=success;

} 

body标签

<body onload="setEndDate()">

当页面加载或StartTime下拉列表更改时，将设置EndTime下拉列表。在第一次加载页面时，必须为EndTime做出初始选择，这在我的例子中更可取。

希望有人会发现它很有用，或者建议一些额外的清理工作。