Question

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

Answer 1

您需要先将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>

Answer 2

这是使用jQuery的简单方法，我希望这就是你的要求

$("#tStartSelect").on("change", function () {
            if($("#tStartSelect").val() <= 22){
                $("#tEndSelect").val(Number($("#tStartSelect").val()) + 1);
            }else{
                $("#tEndSelect").val("0");
            }
        });
        $("#tEndSelect").on("change", function () {
            if($("#tEndSelect").val() <= 23 && $("#tEndSelect").val() > 0){
                $("#tStartSelect").val(Number($("#tEndSelect").val()) - 1);
            }else{
                $("#tStartSelect").val("23");
            }
        });

<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="0">00:00</option>
            <option value="1">01:00</option>
            <option value="2">02:00</option>
            <option value="3">03:00</option>
            <option value="4">04:00</option>
            <option value="5">05:00</option>
            <option value="6">06:00</option>
            <option value="7">07:00</option>
            <option value="8">08:00</option>
            <option value="9">09:00</option>
            <option value="10">10:00</option>
            <option value="11">11:00</option>
            <option value="12">12:00</option>
            <option value="13">13:00</option>
            <option value="14">14:00</option>
            <option value="15">15:00</option>
            <option value="16">16:00</option>
            <option value="17">17:00</option>
            <option value="18">18:00</option>
            <option value="19">19:00</option>
            <option value="20">20:00</option>
            <option value="21">21:00</option>
            <option value="22">22:00</option>
            <option value="23">23:00</option>
        </select>
    </div>
    <div class="t_End">
        <select id="tEndSelect" class="form-control">
            <option value="1">01:00</option>
            <option value="2">02:00</option>
            <option value="3">03:00</option>
            <option value="4">04:00</option>
            <option value="5">05:00</option>
            <option value="6">06:00</option>
            <option value="7">07:00</option>
            <option value="8">08:00</option>
            <option value="9">09:00</option>
            <option value="10">10:00</option>
            <option value="11">11:00</option>
            <option value="12">12:00</option>
            <option value="13">13:00</option>
            <option value="14">14:00</option>
            <option value="15">15:00</option>
            <option value="16">16:00</option>
            <option value="17">17:00</option>
            <option value="18">18:00</option>
            <option value="19">19:00</option>
            <option value="20">20:00</option>
            <option value="21">21:00</option>
            <option value="22">22:00</option>
            <option value="23">23:00</option>
            <option value="0">00:00</option>
        </select>
    </div>

我真的不知道为什么要使用这些值（6、10、14 ...），因为我合理地设置了一个时间值。

p.d .：对不起，我的英语。

根据另一个（JS）的更改发布更新选择值

2 个答案: