加入/連接動態下拉框

我一直在掙扎了一會兒用小投入的安全功能。從本質上講，對於我的網站用戶將選擇一個他們希望開始和結束早班的時間。

我有兩個Select輸入，在循環內由date填充。基本上，我一直試圖（徒勞無功）實現的是，當有人從「開始時間」下拉列表中選擇開始日期時，「結束時間」下拉列表中的所有值均小於「開始時間」，禁用。

我在下面提供了一張圖片來幫助解釋一下，以及當前的代碼以及我的select如何工作。

至於Javascript的任何進展，基本上沒有。我所嘗試過的一切都沒有成功，我開始努力思考新想法。我花了很多時間試圖在StackOverflow上找到解決方案，但我可能使用錯誤的關鍵字進行搜索。

The start time has been selected on the Left Dropdown, at 07:00, but on the Right Dropdown, anything before 07:00 should now be removed/disabled.

<select id="mondayWorking_MorningStart" class="workInput" > 
    <?php 
    $tStart = strtotime($start); 
    $tEnd = strtotime($end); 
    $tNow = $tStart; 

    while($tNow <= $tEnd) 
    { 
     echo "<option id='monday_MorningStart' name='mondayMorningStart'>" . date("H:i",$tNow) . "</option>"; 
     $tNow = strtotime('+30 minutes',$tNow); 
    } 
    ?> 
</select>

感謝你的幫助，

如果您有什麼需要提供你的幫助，請讓我知道！

來源

2016-12-29 Alec Weekes

威爾[這個小提琴（https：//開頭jsfiddle.net/ehsant/L1q8dmp6/）幫助你？ – EhsanT

@亞歷克 - hyve - 威克斯歡迎您，那麼我會後回答你... – EhsanT

要根據第一個下拉值填充第二個下拉列表，首先必須將onChange事件綁定到第一個下拉列表。這意味着，當您更改第一個下拉列表並選擇另一個選項時，JavaScript（在我們的例子中爲jquery）將觸發事件並運行代碼。

在該函數（代碼），我們得到的第一個下拉的值，然後清除第二個下拉選項和填充基於第一個下拉值第二個下拉的內容。

我認爲第二個下拉最大值可以爲24:00和最小值應等於第一個下拉列表值+ 30分鐘... ...

我只是添加了一些選項，首先對選擇測試。你與你的PHP代碼加載它，它沒有什麼區別...

因此，代碼將是這樣的：

$('#selStart').change(function(){ 
 
    var arrTimeStart = $(this).val().split(":"); 
 
    var timeStart = parseInt(arrTimeStart[0] * 60) + parseInt(arrTimeStart[1]); 
 
    timeStart = timeStart + 30; 
 
    var timeEnd = (24 * 60); 
 
    
 
    $('#selEnd').find('option').remove(); 
 
    for (iCnt = timeStart; iCnt <= timeEnd; iCnt = iCnt + 30){ 
 
    vHour = parseInt(iCnt/60); 
 
    vMin = iCnt % 60; 
 
    if(vMin == 0) 
 
     vMin = '00'; 
 
    tmpTime = vHour + ':' + vMin; 
 
    $('#selEnd').append('<option value='+tmpTime+'>'+tmpTime+'</option>'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Start: 
 
<select id="selStart"> 
 
    <option value="00:00">00:00</option> 
 
    <option value="00:30">00:30</option> 
 
    <option value="01:00">01:00</option> 
 
    <option value="01:30">01:30</option> 
 
    <option value="02:00">02:00</option> 
 
    <option value="02:30">02:30</option> 
 
    <option value="03:00">03:00</option> 
 
    <option value="03:30">03:30</option> 
 
    <option value="04:00">04:00</option> 
 
    <option value="04:30">04:30</option> 
 
</select> 
 
<br> 
 
End: 
 
<select id="selEnd"></select>

來源

2016-12-30 21:41:08 EhsanT

加入/連接動態下拉框

回答

相關問題