保留 $(window).on('load'， function() 中的 JavaScript 下拉选择

>我正在使用此处略微修改的脚本版本，在开始和结束时间之间选择开始时间

脚本

$(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 点。脚本将隐藏选定时间 2 中在选定时间 1 中选择的时间之前的时间。

我需要发生的事情：发布表单后，让 SelectedTime2 中的较早时间保持隐藏状态。

所选时间在发布后保留，但选定时间 2 中的较早时间取消隐藏。

我希望防止将来的技术支持呼叫"为什么页面是空白的"，因为他们不注意AM/PM。他们首先选择6PM，然后在应该是9PM时选择9AM 2nd。

谢谢

肖恩

做了一些内务处理并将 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 onload="setEndDate()">

当页面加载或更改"开始时间"下拉列表时，将设置"结束时间"下拉列表。首次加载页面时，必须为 EndTime 做出初始选择，这在我的情况下更可取。

希望有人会发现它有用或建议进行一些额外的清理。

相关内容

最新更新

热门标签：