Bonjour, j'essaye actuellement de crée un select qui contient des valeur envoyer par PHP et qui après sélection me change les valeur d'un select suivant qui affiche les heures que l'on peux sélectionner grâce au select précèdent.

J'arrive a le changer un premier fois mais malheureusement je suis perdu pour la suite et il est fort probable que ce soit faut depuis le début même si ca fonctionne en partie.

Je vous remercie d'avance pour toute l'aide que vous pourrais m'apporter.

<div class="form-group">
<label class="required" for="order_openname">Service :</label>
<select id="order_openname" name="order[openname]" class="form-control">
<option value="11:01:00|15:01:00">Morning</option>
<option value="18:01:00|22:01:00">Afternoon</option></select></div>
        <fieldset class="form-group">
           <legend class="col-form-label required">Order for :</legend>
<div id="order_ready_at" class="form-inline"><div class="col-auto">
                <label class="required" for="order_ready_at_hours">Hours</label>
                <select id="order_ready_at_hours" name="order[ready_at][hours]" class="form-control"><option value="1">0</option>
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
<option value="5">4</option>
<option value="6">5</option>
<option value="7">6</option>
<option value="8">7</option>
<option value="9">8</option>
<option value="10">9</option>
<option value="11">10</option>
<option value="12">11</option>
<option value="13">12</option>
<option value="14">13</option>
<option value="15">14</option>
<option value="16">15</option>
<option value="17">16</option>
<option value="18">17</option>
<option value="19">18</option>
<option value="20">19</option>
<option value="21">20</option>
<option value="22">21</option>
<option value="23">22</option>
<option value="24">23</option>
</select>
            </div>

//select service
var serviceCheck = document.getElementById("order_openname");
var hoursSelect = document.getElementById("order_ready_at_hours");

var serviceValue = serviceCheck.value;
var serviceValueHourStart = serviceValue.substring(0, 2);
var serviceValueMinuteStart = serviceValue.substring(3, 5);
var serviceValueHourStop = serviceValue.substring(9, 11);
var serviceValueMinuteStop = serviceValue.substring(12, 15);

// change select at start

var select = document.createElement("select");
select.name = "order[ready_at][hours]";
select.classList.add("form-control");
hoursSelect.replaceWith(select, hoursSelect);
hoursSelect.remove();
for (serviceValueHourStart; serviceValueHourStart < serviceValueHourStop; serviceValueHourStart++) {
    var addHours = String(serviceValueHourStart);

    var option = document.createElement("option");

    option.text = addHours;
    select.add(option);
    
}
// change select when service is change

serviceCheck.addEventListener('change', function () {
    serviceValue = serviceCheck.value;
    serviceValueHourStart = serviceValue.substring(0, 2);
    serviceValueMinuteStart = serviceValue.substring(3, 5);
    serviceValueHourStop = serviceValue.substring(9, 11);
    serviceValueMinuteStop = serviceValue.substring(12, 15);


    if (select) {

        var selectHours = document.createElement("select");
        selectHours.name = "order[ready_at][hours]";
        selectHours.classList.add("form-control");
        select.replaceWith(selectHours, select);
        select.remove();

        for (serviceValueHourStart; serviceValueHourStart < serviceValueHourStop; serviceValueHourStart++) {
            addHours = String(serviceValueHourStart);

            option = document.createElement("option");

            option.text = addHours;
            selectHours.add(option);
         
        }


    }
    })

solution trouver.

//select service
var serviceCheck = document.getElementById("order_openname");
var hoursSelect = document.getElementById("order_ready_at_hours");
 
var serviceValue = serviceCheck.value;
var serviceValueHourStart = serviceValue.substring(0, 2);
var serviceValueMinuteStart = serviceValue.substring(3, 5);
var serviceValueHourStop = serviceValue.substring(9, 11);
var serviceValueMinuteStop = serviceValue.substring(12, 15);
 
// change select at start
 
var select = document.createElement("select");
select.name = "order[ready_at][hours]";
select.classList.add("form-control");
hoursSelect.replaceWith(select, hoursSelect);
hoursSelect.remove();
for (serviceValueHourStart; serviceValueHourStart < serviceValueHourStop; serviceValueHourStart++) {
    var addHours = String(serviceValueHourStart);
 
    var option = document.createElement("option");
 
    option.text = addHours;
    select.add(option);
     
}
// change select when service is change
 
serviceCheck.addEventListener('change', function () {
    serviceValue = serviceCheck.value;
    serviceValueHourStart = serviceValue.substring(0, 2);
    serviceValueMinuteStart = serviceValue.substring(3, 5);
    serviceValueHourStop = serviceValue.substring(9, 11);
    serviceValueMinuteStop = serviceValue.substring(12, 15);
 
 
   
    var selectTime = document.getElementById("order_ready_at_hours")


    var selectHours = document.createElement("select");
    selectHours.name = "order[ready_at][hours]";
    selectHours.classList.add("form-control");
    selectHours.id =  "order_ready_at_hours";
    selectTime.replaceWith(selectHours, selectTime);
    selectTime.remove();

    for (serviceValueHourStart; serviceValueHourStart < serviceValueHourStop; serviceValueHourStart++) {
        addHours = String(serviceValueHourStart);

        option = document.createElement("option");

        option.text = addHours;
        selectHours.add(option);
        console.log(serviceValueHourStart + ' ' + serviceValueMinuteStart + ' ' + serviceValueHourStop + ' ' + serviceValueMinuteStop);
    }


    }
    })

-
Edité par hadesD 14 avril 2021 à 18:41:53