从数组中的值创建选项元素

Create Option elements from values in array

本文关键字:创建 选项 元素 数组      更新时间:2023-09-26

如何在jQuery中打印时间段而不编写像下面这样的大代码?

function myFunction()
{
var x = document.getElementById("seltime");
var timeslots=["00:00","00:30","01:00","01:30","02:00","02:30","03:00","03:30","04:00","04:30","05:00","05:30","06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30","24:00"];
 for (var i=0; i<timeslots.length; i++)
    {
             var option = document.createElement("option");
             option.text += timeslots[i];
             option.value += timeslots[i];
             x.add(option);
    }
 }
myFunction();

我能想到的最短的:

function myFunction() {
    var options = '';
    for (var h = 0; h <= 24; h++) {
        for (var m = 0; m < 60; m = m + 30) {
            var value  = (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m);
            options += '<option value="' + value + '">' + value + '</option>';
            if (h == 24 && m == 0) break;
        }
    }
    $(".seltime").append(options);
}
myFunction();

这个版本也更有效,因为它没有在循环中附加DOM元素,而是只构建一次选项字符串。

演示:http://jsfiddle.net/ot7x015p/1

这里有一些快速的内容(http://jsfiddle.net/jm2romkv/):

function myFunction()
{
var x = document.getElementById("seltime");
var timeSlotFn = getSlotIncrFn();
 // adjust 50 for more/less values
 for (var i=0; i<50; i++)
    {
             var option = document.createElement("option");
             var timeSlot = timeSlotFn();
             console.log(timeSlot);
    }
}
function getSlotIncrFn() {
    var curr = "00:00";
    return function() {
        var hour_min = curr.split(":");
        if (parseInt(hour_min[0]) == 24) {
            hour_min = ["00", "00"];
        }
        if (hour_min[1] == "00") {
            hour_min[1] = "30";
        } else {
            hour_min[1] = "00";
            var hour = parseInt(hour_min[0]) + 1;
            hour = hour < 10 ? "0" + hour : hour;
            hour_min[0] = hour;
        }
        curr = hour_min.join(":");
        return curr;
    };
};
myFunction();

仅限Jquery试试这个:

function myFunction()
 {
 var timeslots=["00:00","00:30","01:00","01:30","02:00","02:30","03:00","03:30","04:00","04:30","05:00","05:30","06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30","24:00"];
 for (var i=0; i<timeslots.length; i++)
{
   var option = $("<option value='"+timeslots[i]+"'>"+timeslots[i]+"</option>");
   $("#seltime").append(option);      
}

}

使用jQuery可以很简单地这样做:

function myFunction()
{
var timeslots=["00:00","00:30","01:00","01:30","02:00","02:30","03:00","03:30","04:00","04:30","05:00","05:30","06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30","24:00"];
    // Iterate over each timeslot and append it to `#selTime`
    $.each(timeslots, function(index, item){
       $('#selTime').append('<option value="' + item + '">' + item + '</option>'); 
    });
 }
myFunction();

演示:http://jsfiddle.net/robschmuecker/52hgu2od/1/

您也可以使用jquery尝试这个简单的版本。 : http://jsfiddle.net/vnqo2o2b/

    function myFunction()
    {
       var $selTime = $("#seltime");
       var minute=00;
       var hour = 00;
        while(!(hour==24 && minute<=30))
        {
            if(minute == 60) {
                hour++;
                minute =0;
            }
            var time = (hour<=9? "0"+hour : hour) + ":" + (minute == 0 ? "00": minute);
            $selTime.append(
                $('<option></option>').val(time).html(time)
            );
            minute += 30;
        }
     }
    myFunction();