从数组中的值创建选项元素
Create Option elements from values in array
如何在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();
相关文章:
- jqueryui选项卡,根据数据库中的值创建选项卡
- 创建选项卡,每个选项卡有两个文本区域
- 创建选项onClick属性
- jquery ui自动完成combox重新创建选项不起作用
- 如何在创建选项时更改其背景图像
- 如何使用 JSP 创建选项卡式 Html 页面
- JavaScript - 有没有更有效的方法来创建选项元素
- Angular 创建选项卡视图而不会丢失数据
- 我正在尝试在 JavaScript 中创建选项卡式内容,但它只工作一次
- 使用 jQuery 创建选项卡
- 使用jqueryeasyui,如何通过选项卡中的链接创建选项卡
- 用于创建选项卡的javascript
- JQuery正在创建选项卡,tabs()函数出现问题
- 使用javascript为selectbox动态创建选项
- 在aspx中为应用程序表单创建选项卡
- 如何使用Javascript和Jquery创建选项卡
- 使用函数创建选项卡
- 从数组中的值创建选项元素
- 无法在html中创建选项卡面板
- Bootstrap插件创建选项按钮与任意js