堆栈内存溢出
  繁体   English   中英

JQuery 添加选项以动态选择 7 个不同的选择

[英]JQuery add options to select dynamically for 7 different selects

 原文  2019-12-24 10:18:01  9   4    javascript/ jquery/ html

问题描述

我有一个 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

}

上面的代码有效，但它非常重复并且感觉很笨拙。 如何改进代码？

4 个解决方案

解决方案1
 1  2019-12-24 10:28:40

您正在寻找的技术称为 DRY，因为不要重复自己。 在这种情况下，最简单的方法是使用通用类按行为对元素进行分组。 例如，添加类以区分select哪些是开放时间，哪些是关闭时间。 然后，您可以一口气锁定所有目标。

然后，您可以从原始数组构建单个option元素 HTML 数组，并使用它在一次对html()调用中设置所有select html() 。

最后，您可以在相关类上调用val()来设置时间。 不需要任何显式循环。 尝试这个： 

 //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"}]; jQuery(function($) { add_hours(); }); //populate all selects from the array function add_hours() { var html = arr_hours.map(item => `<option value="${item.val}">${item.text}</option>`); let $selects = $('.day-select').html(html); $selects.filter('.open').val('08:00:00'); $selects.filter('.close').val('17:00:00'); }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <p>Monday</p> <label>Open: <select name="mon-open" class="day-select open"></select></label> <label>Close: <select name="mon-close" class="day-select close"></select></label> </div> <div> <p>Tuesday</p> <label>Open: <select name="tue-open" class="day-select open"></select></label> <label>Close: <select name="tue-close" class="day-select close"></select></label> </div> <div> <p>Wednesday</p> <label>Open: <select name="wed-open" class="day-select open"></select></label> <label>Close: <select name="wed-close" class="day-select close"></select></label> </div> <div> <p>Thursday</p> <label>Open: <select name="thu-open" class="day-select open"></select></label> <label>Close: <select name="thu-close" class="day-select close"></select></label> </div> <div> <p>Friday</p> <label>Open: <select name="fri-open" class="day-select open"></select></label> <label>Close: <select name="fri-close" class="day-select close"></select></label> </div> <div> <p>Saturday</p> <label>Open: <select name="sat-open" class="day-select open"></select></label> <label>Close: <select name="sat-close" class="day-select close"></select></label> </div> <div> <p>Sunday</p> <label>Open: <select name="sun-open" class="day-select open"></select></label> <label>Close: <select name="sun-close" class="day-select close"></select></label> </div>

解决方案2
 1 已采纳  2019-12-24 10:31:29

将 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'); }

解决方案3
 1  2019-12-24 10:40:58

添加到 Rory 的答案，您还可以像这样填充 arr_hours ： 

 var arr_hours = []; for(i=0;i<23;i++){ if(i<10){ arr_hours.push({val:'0'+i.toString()+':00'+':00',text:'0'+i.toString()+':00'}); arr_hours.push({val:'0'+i.toString()+':30'+':00',text:'0'+i.toString()+':30'}); } else { arr_hours.push({val:i.toString()+':00'+':00',text:i.toString()+':00'}); arr_hours.push({val:i.toString()+':30'+':00',text:i.toString()+':30'}); } } console.log(arr_hours)

解决方案4
 1  2019-12-24 10:47:31

在您的 html 文件中为所有选择添加类名。 喜欢，

<select name="sun_open_to" id="sun_open_to" class="all close"></select>
<select name="sun_open_from" id="sun_open_from" class="all open"></select>

为类名编写代码。 喜欢，

  $(arr_hours).each(function() {
    $(".all").append($("<option>").attr('value',this.val).text(this.text));
  });
  $('.open option[value="08:00:00"]').attr('selected','
  $('.close option[value="17:00:00"]').attr('selected','selected');

它适用于我的 codepen： https ://codepen.io/hiral13/pen/NWPgPPQ

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 添加选项以进行选择-多个选择 使用JQuery访问Selects中动态创建的选项 动态地（以编程方式）添加新选项来进行踢 <select> jQuery中的标签 动态将选项从数组添加到jQuery多重选择 用jQuery动态填充选择选项 使用Javascript动态添加选择选项 jQuery选择多个选项仅选择最后一个值 如何使用JavaScript将选择菜单选项添加到多个选择中 动态添加jquery ajax选项 动态添加选项以选择选择标签
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM