时间戳

首页 > 解决方案 > 在下拉列表中动态增加时间

javascript - 在下拉列表中动态增加时间

问题描述

我正在尝试创建一个取决于先前输入字段值的动态下拉字段。我有一个length带有选项的下拉列表，30 min.我还有一个用户拥有的60 min.和（基本上是一个范围）。我正在尝试将字段动态添加到我的下拉列表中，该字段会根据所选内容递增。例如，如果、和; 我希望创建下拉菜单，如. 我将不胜感激任何有效地做到这一点的指导。90 min.startTimeendTimetimelengthstartTime is 10:00 amendTime is 2:00 pmlength is 60 min10:00 am, 11:00 am, 12:00 pm, 1:00 pm, 2:00 pm

JavaScript

var length = document.getElementById('length');
var chosenLength = length.options[length.selectedIndex].value;

var startTime = document.getElementById('start');
var endTime = document.getElementById('end');

var time = document.getElementById('time');

time.disabled = true

function disabled() {
    if (chosenLength.value != "") {
        time.disabled = false;
    }
}

function timeGenerate() {
    for (i = startTime; i < endTime; i++) {
        time + chosenLength;
    }
}

function addDropdown() {
    var newDrop = document.createElement('div');
    var doc = '<select>',
        times = timeGenerate(), i;
    for (i = 0; i < times.length; i++) {
        doc += "<option value='" + times[i] + "'>" + times[i] + "</option>";
    }
    doc += '</select>';
    newDrop.innerHTML = doc;
    document.getElementById(divname).appendChild(newDrop);
}

HTML

<div class="text-center">
    <div class="form-group">
        <div class="ins-left">
            <p>Cello</p>
        </div>
        <div class="date-right">
            <p>May 2, 2019</p>
        </div>
    </div>

    <br />
    <br />
    <div class="form-group">
        <label class="ins-l">Length</label>
        <select class="form-control" id="length">
            <option>30 min.</option>
            <option>60 min.</option>
            <option>90 min.</option>
        </select>
    </div>

    <br />

    <div class="form-group">
        <label>Time</label>
        <select class="form-control" id="time">
        </select>
    </div>

    <div class="bottom">
        <button type="submit" name="submit" class="btn blue_button">Book Now</button>
    </div>
</div>

<div class="hidden">
    <p id="start">10:00 am</p>
    <p id="end">2:00 pm</p>
</div>

JSFiddle：https ://jsfiddle.net/ta5h034L/2/

标签： javascriptjquery

解决方案

如果您使用 moment.js，我认为生成计划时间对您来说很容易。我已根据您的要求更新了截图。我认为这种方法对您很有帮助。

我已经更新了你的代码片段，请你看看 JSFiddle 上的更新脚本，

JSFiddle 更新：https ://jsfiddle.net/jeLk4xhs/3/

主要代码是这样的，

var start = "10:00 AM";
var end = "2:00 PM";

var timeDistance = 30;
var slotTimes = [];

var startMoment = moment(start, "h:mm A");
var endMoment = moment(end, "h:mm A");

while (startMoment.isSameOrBefore(endMoment)) {
    slotTimes.push(startMoment.format("h:mm A"));
    startMoment = startMoment.add(timeDistance, 'minutes');
}

console.log(slotTimes);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>

  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

谢谢你 ：）

推荐阅读