我的网页上有两次选择。 #tStartSelect(00:00、01:00 ... 23:00)和#tEndSelect(01:00、02:00 ... 00:00)。
我正在尝试编写一个函数,该函数在更改任一选择的值时会自动将另一个更改为 +-1 小时,从而使用户无法选择“负”时间跨度。
它似乎适用于一些选择,但随后开始允许负时间跨度。例如。 (更改为粗体框):
00:00 到 11:00
13:00 至 14:00
07:00 至 08:00
14:00 至 15:00
08:00 至 09:00
14:00 到 09:00(负时间跨度)
我是编程的新手,所以任何帮助都会很棒,谢谢!
代码:
$(document).on('change', '#tStartSelect', function() {
timeSelectAdjust('start');
});
$(document).on('change', '#tEndSelect', function() {
timeSelectAdjust('end');
});
var timeSelectAdjust = function(startEnd) {
var startVal = parseInt($('#tStartSelect').val());
var endVal = parseInt($('#tEndSelect').val());
if (startEnd === 'start') {
if (startVal >= endVal) {
$('#tEndSelect option[value=' + (startVal + 4) + ']').attr('selected', 'selected');
}
} else if (startEnd === 'end') {
if (endVal <= startVal) {
$('#tStartSelect option[value=' + (endVal - 4) + ']').attr('selected', 'selected');
}
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t_Start">
<select id="tStartSelect" class="form-control">
<option value="2">00:00</option>
<option value="6">01:00</option>
<option value="10">02:00</option>
<option value="14">03:00</option>
<option value="18">04:00</option>
<option value="22">05:00</option>
<option value="26">06:00</option>
<option value="30">07:00</option>
<option value="34">08:00</option>
<option value="38">09:00</option>
<option value="42">10:00</option>
<option value="46">11:00</option>
<option value="50">12:00</option>
<option value="54">13:00</option>
<option value="58">14:00</option>
<option value="62">15:00</option>
<option value="66">16:00</option>
<option value="70">17:00</option>
<option value="74">18:00</option>
<option value="78">19:00</option>
<option value="82">20:00</option>
<option value="86">21:00</option>
<option value="90">22:00</option>
<option value="94">23:00</option>
</select>
</div>
<div class="t_End">
<select id="tEndSelect" class="form-control">
<option value="6">01:00</option>
<option value="10">02:00</option>
<option value="14">03:00</option>
<option value="18">04:00</option>
<option value="22">05:00</option>
<option value="26">06:00</option>
<option value="30">07:00</option>
<option value="34">08:00</option>
<option value="38">09:00</option>
<option value="42">10:00</option>
<option value="46">11:00</option>
<option value="50">12:00</option>
<option value="54">13:00</option>
<option value="58">14:00</option>
<option value="62">15:00</option>
<option value="66">16:00</option>
<option value="70">17:00</option>
<option value="74">18:00</option>
<option value="78">19:00</option>
<option value="82">20:00</option>
<option value="86">21:00</option>
<option value="90">22:00</option>
<option value="94">23:00</option>
<option value="98">00:00</option>
</select>
</div>
最佳答案
您需要先将您的字符串
转换为整数
,否则,您将连接文本而不是添加值。
var startVal = parseInt($('#tStartSelect').val());
var endVal = parseInt($('#tEndSelect').val());
它以另一种方式工作,因为您减去一个值,所以在这种情况下没有连接。
$(document).on('change', '#tStartSelect', function() {
timeSelectAdjust('start');
});
$(document).on('change', '#tEndSelect', function() {
timeSelectAdjust('end');
});
var timeSelectAdjust = function(startEnd) {
var startVal = parseInt($('#tStartSelect').val());
var endVal = parseInt($('#tEndSelect').val());
if (startEnd === 'start') {
if (startVal >= endVal) {
$('#tEndSelect').find('option').attr('selected', false);
$('#tEndSelect option[value=' + (startVal + 4) + ']').attr('selected', true);
}
} else if (startEnd === 'end') {
if (endVal <= startVal) {
$('#tStartSelect').find('option').attr('selected', false);
$('#tStartSelect option[value=' + (endVal - 4) + ']').attr('selected', true);
}
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t_Start">
<select id="tStartSelect" class="form-control">
<option value="2">00:00</option>
<option value="6">01:00</option>
<option value="10">02:00</option>
<option value="14">03:00</option>
<option value="18">04:00</option>
<option value="22">05:00</option>
<option value="26">06:00</option>
<option value="30">07:00</option>
<option value="34">08:00</option>
<option value="38">09:00</option>
<option value="42">10:00</option>
<option value="46">11:00</option>
<option value="50">12:00</option>
<option value="54">13:00</option>
<option value="58">14:00</option>
<option value="62">15:00</option>
<option value="66">16:00</option>
<option value="70">17:00</option>
<option value="74">18:00</option>
<option value="78">19:00</option>
<option value="82">20:00</option>
<option value="86">21:00</option>
<option value="90">22:00</option>
<option value="94">23:00</option>
</select>
</div>
<div class="t_End">
<select id="tEndSelect" class="form-control">
<option value="6">01:00</option>
<option value="10">02:00</option>
<option value="14">03:00</option>
<option value="18">04:00</option>
<option value="22">05:00</option>
<option value="26">06:00</option>
<option value="30">07:00</option>
<option value="34">08:00</option>
<option value="38">09:00</option>
<option value="42">10:00</option>
<option value="46">11:00</option>
<option value="50">12:00</option>
<option value="54">13:00</option>
<option value="58">14:00</option>
<option value="62">15:00</option>
<option value="66">16:00</option>
<option value="70">17:00</option>
<option value="74">18:00</option>
<option value="78">19:00</option>
<option value="82">20:00</option>
<option value="86">21:00</option>
<option value="90">22:00</option>
<option value="94">23:00</option>
<option value="98">00:00</option>
</select>
</div>
关于javascript - 根据另一个(JS)的变化发布更新选择值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54327692/