0
votes

JQuery ajoute des options pour sélectionner dynamiquement 7 sélections différentes

J'ai une page html qui a 14 sélections différentes, chaque sélection est pour un jour de la semaine (c'est-à-dire du lundi au dimanche), chaque jour a 2 sélections, une pour l'heure d'ouverture et une pour l'heure de fermeture. Je remplis les 14 sélections avec une liste dans JQuery, voici mon code complet ci-dessous:

//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

}

Le code ci-dessus fonctionne, mais il est très répétitif et semble volumineux. Comment puis-je améliorer le code?

javascript jquery html

1 commentaires

faites également une boucle pendant des jours. save ids dans un tableau peut être.

4 Réponses :

1
votes

La technique que vous recherchez s'appelle DRY, pour Don't Repeat Yourself. Le moyen le plus simple de le faire dans ce cas est d'utiliser des classes communes pour regrouper les éléments par comportement. Par exemple, ajoutez des classes pour différencier select qui sont pour les heures d'ouverture, et qui sont pour la fermeture. Ensuite, vous pouvez tous les cibler en une seule fois.

Vous pouvez ensuite créer un seul tableau d'élément HTML option à partir du tableau d'origine et l'utiliser pour définir le HTML de tous les select en un seul appel à html () .

Enfin, vous pouvez appeler val () sur les classes pertinentes pour définir les heures. Il n'y a pas besoin de boucles explicites. Essayez ceci:

<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>

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

0 commentaires

1
votes

Remplacez add_hours () comme suit:

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

0 commentaires

1
votes

En plus de la réponse de Rory, vous pouvez également utiliser arr_hours comme ceci:

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)

0 commentaires

1
votes

Ajoutez le nom de la classe dans votre fichier html pour tout sélectionner. Comme,

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

Écrivez le code pour le nom de la classe. Comme,

<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>

Cela fonctionne dans mon codepen: https://codepen.io/hiral13/pen/NWPgPPQ

p >

0 commentaires