javascript - JQuery 添加选项以动态选择 7 种不同的选择

Question

我有一个 html 页面，其中有 14 个不同的选择，每个选择针对一周中的一天(即周一 - 周日)，每天有 2 个选择，一个用于开放时间，一个用于关闭时间。我用 JQuery 中的列表填充所有 14 个选择，下面是我的完整代码:

//hours to populate select
var arr_hours = [
    {val: '00:00:00', text: '00:00'},
    {val: '00:30:00', text: '00:30'},
    {val: '01:00:00', text: '01:00'},
    {val: '01:30:00', text: '01:30'},
    {val: '02:00:00', text: '02:00'},
    {val: '02:30:00', text: '02:30'},
    {val: '03:00:00', text: '03:00'},
    {val: '03:30:00', text: '03:30'},
    {val: '04:00:00', text: '04:00'},
    {val: '04:30:00', text: '04:30'},
    {val: '05:00:00', text: '05:00'},
    {val: '05:30:00', text: '05:30'},
    {val: '06:00:00', text: '06:00'},
    {val: '06:30:00', text: '06:30'},
    {val: '07:00:00', text: '07:00'},
    {val: '07:30:00', text: '07:30'},
    {val: '08:00:00', text: '08:00'},
    {val: '08:30:00', text: '08:30'},
    {val: '09:00:00', text: '09:00'},
    {val: '09:30:00', text: '09:30'},
    {val: '10:00:00', text: '10:00'},
    {val: '10:30:00', text: '10:30'},
    {val: '11:00:00', text: '11:00'},
    {val: '11:30:00', text: '11:30'},
    {val: '12:00:00', text: '12:00'},
    {val: '12:30:00', text: '12:30'},
    {val: '13:00:00', text: '13:00'},
    {val: '13:30:00', text: '13:30'},
    {val: '14:00:00', text: '14:00'},
    {val: '14:30:00', text: '14:30'},
    {val: '15:00:00', text: '15:00'},
    {val: '15:30:00', text: '15:30'},
    {val: '16:00:00', text: '16:00'},
    {val: '16:30:00', text: '16:30'},
    {val: '17:00:00', text: '17:00'},
    {val: '17:30:00', text: '17:30'},
    {val: '18:00:00', text: '18:00'},
    {val: '18:30:00', text: '18:30'},
    {val: '19:00:00', text: '19:00'},
    {val: '19:30:00', text: '19:30'},
    {val: '20:00:00', text: '20:00'},
    {val: '20:30:00', text: '20:30'},
    {val: '21:00:00', text: '21:00'},
    {val: '21:30:00', text: '21:30'},
    {val: '22:00:00', text: '22:00'},
    {val: '22:30:00', text: '22:30'},
    {val: '23:00:00', text: '23:00'},
    {val: '23:30:00', text: '23:30'},
];

$(document).ready(function(){
    //Add time values to business hours selects
    add_hours();
});

//populate all selects from the array
function add_hours(){
    //monday
    $(arr_hours).each(function() {
        $("#mon_open_from").append($("<option>").attr('value',this.val).text(this.text));
    });

    $('#mon_open_from option[value="08:00:00"]').attr('selected','selected');

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

    $('#mon_open_to option[value="17:00:00"]').attr('selected','selected'); 
    // /monday

    //tuesday
    $(arr_hours).each(function() {
        $("#tue_open_from").append($("<option>").attr('value',this.val).text(this.text));
    });

    $('#tue_open_from option[value="08:00:00"]').attr('selected','selected');

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

    $('#tue_open_to option[value="17:00:00"]').attr('selected','selected'); 
    // /tuesday

    //wednesday
    $(arr_hours).each(function() {
        $("#wed_open_from").append($("<option>").attr('value',this.val).text(this.text));
    });

    $('#wed_open_from option[value="08:00:00"]').attr('selected','selected');

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

    $('#wed_open_to option[value="17:00:00"]').attr('selected','selected'); 
    // /wednesday

    //thursday
    $(arr_hours).each(function() {
        $("#thur_open_from").append($("<option>").attr('value',this.val).text(this.text));
    });

    $('#thur_open_from option[value="08:00:00"]').attr('selected','selected');

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

    $('#thur_open_to option[value="17:00:00"]').attr('selected','selected');    
    // /thursday

    //friday
    $(arr_hours).each(function() {
        $("#fri_open_from").append($("<option>").attr('value',this.val).text(this.text));
    });

    $('#fri_open_from option[value="08:00:00"]').attr('selected','selected');

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

    $('#fri_open_to option[value="17:00:00"]').attr('selected','selected'); 
    // /friday

    //saturday
    $(arr_hours).each(function() {
        $("#sat_open_from").append($("<option>").attr('value',this.val).text(this.text));
    });

    $('#sat option[value="08:00:00"]').attr('selected','selected');

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

    $('#sat_open_to option[value="17:00:00"]').attr('selected','selected'); 
    // /monday

    //sunday
    $(arr_hours).each(function() {
        $("#sun_open_from").append($("<option>").attr('value',this.val).text(this.text));
    });

    $('#sun_open_from option[value="08:00:00"]').attr('selected','selected');

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

    $('#sun_open_to option[value="17:00:00"]').attr('selected','selected'); 
    // /monday

}

上面的代码可以工作，但是它非常重复并且感觉很笨重。如何改进代码？

Answer 1

将 add_hours() 替换为如下:

function add_hours(){
    
    $(arr_hours).each(function() {
        $("select[id$='_open_from']").append($("<option>").attr('value',this.val).text(this.text));
        $("select[id$='_open_to']").append($("<option>").attr('value',this.val).text(this.text));
    });

    $("select[id$='_open_from'] option[value='08:00:00']").attr('selected','selected');
    $("select[id$='_open_to'] option[value='17:00:00']").attr('selected','selected');
}