文章/答案/技术大牛

发布

社区首页 >问答首页 >连接/连接动态下拉

问连接/连接动态下拉
EN

Stack Overflow用户

提问于 2016-12-29 19:59:18

回答 1查看 34关注 0票数 0

你好斯塔克沃夫退伍军人，

我已经为一个小的输入安全功能挣扎了一段时间。从本质上说，对于我的网站用户来说，他们会选择一个他们希望开始和结束早班的时间。

我有两个Select输入，它们由循环中的date填充。基本上，我一直试图(徒劳无功)实现的是，当某人从“开始时间”下拉菜单中选择一个开始日期时，“结束时间”下拉列表的所有值都小于“开始时间”，即“禁用时间”。

我在下面提供了一个图像，以帮助更好地解释一下，以及我现在的代码与我的select的工作方式有关。

至于Javascript的任何进展，基本上没有进展。我尝试过的一切都没有用，我开始努力想出新的想法。我花了很多时间试图在StackOverflow上找到解决方案，但我可能是用错误的关键字搜索的。

在左边的下拉列表中，在07:00已经选择了开始时间，但是在右边的下拉列表中，07:00之前的任何内容现在都应该被删除/禁用。

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

谢谢你的帮助,

如果你还需要什么帮助，请告诉我！

javascript

php

mysql

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-30 21:41:08

要根据第一个下拉值填充第二个下拉列表，首先必须将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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41386416

复制

相似问题

问连接/连接动态下拉
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问连接/连接动态下拉EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问连接/连接动态下拉
EN