时间戳

首页 > 解决方案 > 根据另一个（JS）的变化更新选择值

javascript - 根据另一个（JS）的变化更新选择值

问题描述

我的网页上有两次选择。#tStartSelect (00:00, 01:00 ... 23:00) 和 #tEndSelect (01:00, 02:00 ... 00:00)。

我正在尝试编写一个函数，当任一选择的值发生变化时，它会自动将另一个选择更改为 +-1hr，从而使用户无法选择“负”时间跨度。

它似乎适用于一些选择，但随后开始允许负时间跨度。例如（更改为粗体框）：

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>

标签： javascriptjquery

解决方案

您需要先将您的转换string为integer，否则，您将连接文本而不是添加值。

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>

推荐阅读