加入/连接动态下拉框

我一直在挣扎了一会儿用小投入的安全功能。从本质上讲，对于我的网站用户将选择一个他们希望开始和结束早班的时间。

我有两个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

加入/连接动态下拉框

回答

相关问题