我有许多选择框,可以在选择类别选项时设置特定的开始和结束时间。但是我已经设法将与on
change
事件一起运行的函数放在一起,这在我创建事件时非常好,但我想在编辑时也调用它同样的事件。
$(document).on('change', '#js_sub', function() {
var GetValue = $(this).val();
var GetSlots = GetValue.charAt(GetValue.length - 1);
var shouldEnable = GetSlots == 'Y';
if (shouldEnable){
$("select[name='start_time_hour']:eq(0)").val('09');
$("select[name='start_time_minute']:eq(0)").val('30');
$("select[name='end_time_hour']:eq(0)").val('15');
$("select[name='end_time_minute']:eq(0)").val('00');
}
$('#js_start_time_hour option:not(:selected)').prop('disabled', shouldEnable);
$('#js_start_time_minute option:not(:selected)').prop('disabled', shouldEnable);
$('#js_end_time_hour option:not(:selected)').prop('disabled', shouldEnable);
$('#js_end_time_minute option:not(:selected)').prop('disabled', shouldEnable);
});
<select id="#js_sub">
<option value="01_Y">Day Slot</option>
<option value="02_N">Anytime</option>
</select>
<select id="#js_start_time_hour">
<option value="06">06</option>
<option value="07">07</option>
...
</select>
<select id="#js_start_time_minute">
<option value="00">00</option>
<option value="05">05</option>
...
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
我还要检查#js_sub
值的最后一个字符,看它是Y
还是N
,这只是我为另一个不相关的脚本调用第二个值的一种方式
关于如何在加载和更改时运行此指南的任何指导都很棒
编辑基于评论:
我根据以下建议做了一些阅读,并将以下内容放在一起,确实有效:
var SlotsFunction = function() {
var GetValue = $("#js_sub").val();
var GetSlots = GetValue.charAt(GetValue.length - 1);
var shouldEnable = GetSlots == 'Y';
if (shouldEnable){
$("select[name='start_time_hour']:eq(0)").val('09');
$("select[name='start_time_minute']:eq(0)").val('30');
$("select[name='end_time_hour']:eq(0)").val('15');
$("select[name='end_time_minute']:eq(0)").val('00');
}
$('#js_start_time_hour option:not(:selected)').prop('disabled', shouldEnable);
$('#js_start_time_minute option:not(:selected)').prop('disabled', shouldEnable);
$('#js_end_time_hour option:not(:selected)').prop('disabled', shouldEnable);
$('#js_end_time_minute option:not(:selected)').prop('disabled', shouldEnable);
}
$(document).ready(SlotsFunction);
$("#js_sub").change(SlotsFunction);