2016-10-21 158 views
-1

我有2個非常大的選擇框,我認爲這不是選擇時間的最佳方法。 我不得不限制用戶選擇比結束時間更短的開始時間。我的意思是我的酒店營業時間。這是我使用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> 

現在我要限制用戶選擇結束時間比開始時間時,可以說,用戶選擇上午10點,然後必須選擇像下午的實時大於上午10項或條款。使用jquery。 這裏是你可以看到FIDDLE

+1

您需要了解的循環,避免重複的代碼。 – C2486

+1

您需要在函數中使用'for($ i = 1; $ i <= 12; $ i ++)'來獲取選項。這不是一個可讀的代碼。 – vaso123

+0

你是否在'getWeekdayEndTime()'中獲得時間戳?如果在任何情況下獲得時間戳,那麼很容易找出哪一個大於。 – Samir

回答

0

要使用jQuery禁用結束時間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); 
}); 
+0

我想驗證沒有禁用 –

+0

@SudarshanKalebere你寫道:_現在我必須限制用戶選擇結束時間大於開始時間_ – vaso123

+0

@SudarshanKalebere你能解釋「驗證」嗎?提示消息「結束時間必須大於{startedTime}」? – Kamae

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") 

} 
相關問題