Question

我创建了一个下拉列表，其中包含每小时（0-23）的选项。

我如何简化这个js所以arr是一个循环？就像现在一样，它的输入和我手动编写html中的每个选项一样多。

$(arr).each(function() {
 $("#time").append($("<option>").attr('value',this.val).text(this.text));
});

Answer 1

简单，创建一个循环，增加小时数并动态创建时间字符串：

var t = 11,
    a = "am";

for(var i = 0; i < 24; i++){
    if(i > 11){
        a = "pm";
    }
    if(t == 12){
        t = 1;
    }else{
        t += 1;
    }
    $("#time").append($("<option>").attr('value',i).text(t+":00 "+a));
}

有关工作示例，请参阅此fiddle。

正如Pevara在评论中所建议的那样，您可以通过向变量添加选项并在循环后更新DOM一次来加快进程。除了使用内联三元表达式减少代码，如下所示：

var hour = 12,
    options = '';

for (var i = 0; i < 24;i++) {
    options += '<option value="' + i + '">' 
        + hour + ':00 ' + (i > 11 ? 'pm' : 'am') 
        + '</option>'
    ;
    hour = hour >= 12 ? 1 : hour + 1;
}
$("#time").html(options);

查看他们的fiddle。

Answer 2

首先，不要依赖jQuery来完成简单的任务。它慢了。（用户评价为友好评论，好建议，谢谢Pevara）

这更快。 https://jsfiddle.net/fm43690a/ （最初说150x，但这被夸大了。即使在不同的浏览器中，JS表现不同，有些人可能会认真对待。实际上它只快6-8倍。见jsfiddle）

var option, obj = document.getElementById("time");
for(x=0; x < 24; x++){
    option = document.createElement("option");
    option.text = 
        (x===0) ? ("12:00 am")
	:(x<12) ? (x+":00 am")
        :(x===12) ? "12:00 pm"
        :((x-12)+":00 pm")
        ;
    option.value = x;                      
    obj.add(option);
}

<select id="time"></select>

Answer 3

这是一个简短的：

for (var i = 1; i <= 23; i++) {
    var clock = (i < 12) ? 'am' : 'pm';
    var hour = (i > 12) ? i - 12 : i;
    $("#time").append($("<option>").attr('value', i).text(hour + ':00 ' + clock));
};
$("#time option:first").before($("<option>").attr('value', 0).text('12:00 am'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="time"></select>

简化这个循环构建的时间下拉列表？

3 个答案: