Question

我正在尝试创建一个动态下拉字段，该字段取决于先前输入字段的值。我有一个length下拉菜单，其中有30 min.，60 min.和90 min.选项，我还有一个startTime和endTime（基本上是一个范围）用户拥有的。我试图将字段动态添加到我的time下拉列表中，该字段基于所选的length递增。例如，如果startTime is 10:00 am，endTime is 2:00 pm和length is 60 min；我希望创建下拉列表，如10: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/

Answer 1

如果您使用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>

谢谢：）

Answer 2

这对您有帮助！

<body>
    <div>
        <label >Length</label>
        <select id="length">
            <option>30 min.</option>
            <option>60 min.</option>
            <option>90 min.</option>
        </select>
    </div>

    <div>
        <label>Time</label>
        <select class="time">
        </select>
    </div>

<script>
$(document).ready(function(){
    $('select').on('change', function() {
        var start = 10;
        var end = 2;
        var options=" ";
        var h,m;
        switch($("#length").val()){         
            h = 10;
            m = 0;
            options += '<option value=" ">'+h:m+'</option>';

            case 30:
                for(var i=start;i<end;i++){
                 m = m + $("#length").val();
                    if(m == 60){
                       h++;         
                       m=0;         
                    }
                    options+= '<option value="'+h+'">'+h+":"+m+'</option>';
                }
                break;

            case 60;
                for(var i=start;i<end;i++){
                 m = m + $("#length").val();
                    if(m == 60){
                       h++;                 
                       m=0; 
                    }
                    options+= '<option value="'+h+'">'+h+":"+m+'</option>';
                }
                break;
            case 90;
                for(var i=start;i<end;i++){
                 m = m + $("#length").val();
                    if(m > 60){
                       h++;                 
                       m=30;    
                    }
                    options+= '<option value="'+h+'">'+h+":"+m+'</option>';
                }
                break;
        }
        $('.time').html(options); 
    }); 
});
</script>
</body>

动态增加下拉时间

2 个答案: