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

如何在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();

这里有一些简单的事情：

仅限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);      

}

---

}我能想到的最短的：

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元素，而是只构建一次选项字符串

---

演示：使用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();

---

演示：

您也可以使用jquery尝试这个简单的版本。 演示：

---

我如何使用jQuery来实现这一点，这样我就可以使用Class而不是Id了。

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();

    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();