Question

我有两个非常大的选择框，我认为这不是选择时间的最佳方法。我必须限制用户选择比结束时间短的开始时间。我的意思是酒店开业的营业时间。这是我使用select做的。

<div class="weekends">
    <label for="">Weekdays</label>
    <select class="startTimeWeekDays" name="" id="">
        <option value="1am" <?php if( '1am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>1am</option>
        <option value="2am" <?php if( '2am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>2am</option>
        <option value="3am" <?php if( '3am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>3am</option>
        <option value="4am" <?php if( '4am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>4am</option>
        <option value="5am" <?php if( '5am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>5am</option>
        <option value="6am" <?php if( '6am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>6am</option>
        <option value="7am" <?php if( '7am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>7am</option>
        <option value="8am" <?php if( '8am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>8am</option>
        <option value="9am" <?php if( '9am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>9am</option>
        <option value="10am" <?php if( '10am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>10am</option>
        <option value="11am" <?php if( '11am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>11am</option>
        <option value="12am" <?php if( '12am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>12am</option>
        <option value="1pm" <?php if( '1pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>1pm</option>
        <option value="2pm" <?php if( '2pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>2pm</option>
        <option value="3pm" <?php if( '3pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>3pm</option>
        <option value="4pm" <?php if( '4pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>4pm</option>
        <option value="5pm" <?php if( '5pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>5pm</option>
        <option value="6pm" <?php if( '6pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>6pm</option>
        <option value="7pm" <?php if( '7pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>7pm</option>
        <option value="8pm" <?php if( '8pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>8pm</option>
        <option value="9pm" <?php if( '9pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>9pm</option>
        <option value="10pm" <?php if( '10pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>10pm</option>
        <option value="11pm" <?php if( '11pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>11pm</option>
        <option value="12pm" <?php if( '12pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>12pm</option>
    </select>
    <select class="endTimeWeekDays" name="" id="">
        <option value="1am" <?php if( '1am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>1am</option>
        <option value="2am" <?php if( '2am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>2am</option>
        <option value="3am" <?php if( '3am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>3am</option>
        <option value="4am" <?php if( '4am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>4am</option>
        <option value="5am" <?php if( '5am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>5am</option>
        <option value="6am" <?php if( '6am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>6am</option>
        <option value="7am" <?php if( '7am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>7am</option>
        <option value="8am" <?php if( '8am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>8am</option>
        <option value="9am" <?php if( '9am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>9am</option>
        <option value="10am" <?php if( '10am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>10am</option>
        <option value="11am" <?php if( '11am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>11am</option>
        <option value="12am" <?php if( '12am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>12am</option>
        <option value="1pm" <?php if( '1pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>1pm</option>
        <option value="2pm" <?php if( '2pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>2pm</option>
        <option value="3pm" <?php if( '3pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>3pm</option>
        <option value="4pm" <?php if( '4pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>4pm</option>
        <option value="5pm" <?php if( '5pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>5pm</option>
        <option value="6pm" <?php if( '6pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>6pm</option>
        <option value="7pm" <?php if( '7pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>7pm</option>
        <option value="8pm" <?php if( '8pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>8pm</option>
        <option value="9pm" <?php if( '9pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>9pm</option>
        <option value="10pm" <?php if( '10pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>10pm</option>
        <option value="11pm" <?php if( '11pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>11pm</option>
        <option value="12pm" <?php if( '12pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>12pm</option>
    </select>
</div>

现在我必须限制用户选择大于开始时间的结束时间，让我们说用户选择10am然后必须选择大于10am或者像pm一样实时。使用jquery。这是你可以看到的FIDDLE

Answer 1

$(function(){
  $("#checkin").on("change",function(){
    var chkIn = getValue($(this).val()), chkout = getValue($("#checkout").val())
    if(chkIn>=chkout) {
      alert("Checkin should be lesser than checkout");
      resetSelectedOptions();
    }

  })

  $("#checkout").on("change",function(){
    var chkout = getValue($(this).val()), chkIn = getValue($("#checkin").val())
    if(chkIn>=chkout) {
      alert("Checkin should be lesser than checkout");
      resetSelectedOptions()
    }

  })
})



function getValue(str){
  return str.indexOf("am")>-1?parseInt(str):parseInt(str)+12;
}

function resetSelectedOptions(){
    $("#checkout").val("1am");
    $("#checkin").val("1am")

}

Answer 2

要使用jQuery禁用endTime option，您可以使用：

$(".startTimeWeekDays").change(function(){
   var startTime = $(this).val(); // Get the starting time

   // Reset disabled status
   $(".endTimeWeekDays option").prop("disabled", false);

   // Disable the end time options equal or less than selected time
   $(".endTimeWeekDays option[value='"+startTime+"']").next().prevAll().prop("disabled", true);
});

如何使用select验证开始时间和结束时间

2 个答案: