Bonjour

J'aimerais modifier les valeurs d'une liste déroulante en JS en temps réel

C'esrt 3 listes déroulantes, jours-mois-années, et je voudrais qu'elles soient modifiées en fonction de la date d'aujourd'hui

Auriez-vous des idées?

Cordialement

Salut. Un truc comme ça ?

<form name=formu>
    Jour, mois, ammée : 
    <select name=jour>
        <option>1
        <option>2
        <option>3
        <option>4
        <option>5
        <option>6
        <option>7
        <option>8
        <option>9
        <option>10
        <option>11
        <option>12
        <option>13
        <option>14
        <option>15
        <option>16
        <option>17
        <option>18
        <option>19
        <option>20
    </select>
    <select name=mois>
        <option>1
        <option>2
        <option>3
        <option>4
        <option>5
        <option>6
        <option>7
        <option>8
        <option>9
        <option>10
        <option>11
        <option>12
    </select>
    <select name="an">
        <option>2020
        <option>2021
        <option>2022
        <option>2023
    </select>
</form>

JS

date = new Date;
for (let opt of formu.jour.options) if(opt.text == date.getDate()) opt.selected = true;
for (let opt of formu.mois.options) if(opt.text == date.getMonth()) opt.selected = true;
for (let opt of formu.an.options) if(opt.text == date.getFullYear()) opt.selected = true;

Mais, c'est pour apprendre, parce que tu as un truc 'ach'ment plus simple, c'est l'input de type date !

Cordialement.

Domi65 a écrit:

Salut. Un truc comme ça ?

<form name=formu>
    Jour, mois, ammée : 
    <select name=jour>
        <option>1
        <option>2
        <option>3
        <option>4
        <option>5
        <option>6
        <option>7
        <option>8
        <option>9
        <option>10
        <option>11
        <option>12
        <option>13
        <option>14
        <option>15
        <option>16
        <option>17
        <option>18
        <option>19
        <option>20
    </select>
    <select name=mois>
        <option>1
        <option>2
        <option>3
        <option>4
        <option>5
        <option>6
        <option>7
        <option>8
        <option>9
        <option>10
        <option>11
        <option>12
    </select>
    <select name="an">
        <option>2020
        <option>2021
        <option>2022
        <option>2023
    </select>
</form>

JS

date = new Date;
for (let opt of formu.jour.options) if(opt.text == date.getDate()) opt.selected = true;
for (let opt of formu.mois.options) if(opt.text == date.getMonth()) opt.selected = true;
for (let opt of formu.an.options) if(opt.text == date.getFullYear()) opt.selected = true;

Mais, c'est pour apprendre, parce que tu as un truc 'ach'ment plus simple, c'est l'input de type date !

Cordialement.

Bonjour

Merci pour ta réponse

Le problème n'est pas la modification, mais le fait qu'elle se fasse en temps réel, c'est là où je trouve pas de solution

Bonjour,

>> mais le fait qu'elle se fasse en temps réel,

Qu'appelles tu temps réel? Au chargement de la  page?

La date du jour dure 24H.

Quel est ton besoin exactement?

« Qu'appelles tu temps réel ? »

Bonne question, car je n'ai pas l'impression que la solution proposée se fasse en temps irréel. ;-)

Cela se fait au chargement de la page. Si on veut le faire à un autre moment, il suffit d'inclure le code dans une fonction qu'on appelle au moment voulu.

AbcAbc6 a écrit:

Bonjour,

>> mais le fait qu'elle se fasse en temps réel,

Qu'appelles tu temps réel? Au chargement de la  page?

La date du jour dure 24H.

Quel est ton besoin exactement?

En gros que ça se renouvelle chaque jour, si c'est le 24, ça retire les 23 premiers jours, etc...

Donc tu veux que les premières options correspondent au jour courant ? Et qu'elles soient donc sélectionnées par défaut.  Et qu'on ne puisse pas choisir une date passée. Je t'ai bien compris ?

EDIT : encore une fois, tu peux le faire avec un input de type date. Il suffit d'ajouter l'attribut min, auquel tu donnes la valeur correspondant au jour courant, soit par le script côté serveur, soit par du JS côté client. Cette dernière solution te va-t-elle ? Ça me semble plus sympa pour l'internaute que tes selects.

-
Edité par Domi65 18 juin 2022 à 20:12:18

Domi65 a écrit:

Donc tu veux que les premières options correspondent au jour courant ? Et qu'elles soient donc sélectionnées par défaut.  Et qu'on ne puisse pas choisir une date passée. Je t'ai bien compris ?

EDIT : encore une fois, tu peux le faire avec un input de type date. Il suffit d'ajouter l'attribut min, auquel tu donnes la valeur correspondant au jour courant, soit par le script côté serveur, soit par du JS côté client. Cette dernière solution te va-t-elle ? Ça me semble plus sympa pour l'internaute que tes selects.

-
Edité par Domi65 il y a environ 22 heures