javascript - 根据另一个(JS)的变化发布更新选择值

Question

我的网页上有两次选择。 #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>

Answer 1

您需要先将您的字符串转换为整数，否则，您将连接文本而不是添加值。

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>