Bonsoir,

j'ai avec moult recherche afin de lier deux selects ensemble un code sur ce forum.

Le problème est que ce code utilise la valeur "value" pour fonctionner.

Voici le code :

<select id="select1" onchange="app_sel(this.value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<span id="select2">
<select id="select21" style="display:inline;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<select id="select22" style="display:none;">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>

<select id="select23" style="display:none;">
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</span>

<script type="text/javascript">
function app_sel(valeur) { // Le param valeur servira à savoir quel select afficher
 var sels = document.getElementById("select2").getElementsByTagName("select"); // On récupère tous les selects dans le span id="select2"
 for(var i=0,l=sels.length;i<l;i++) { // Et on les cache tous
  sels[i].style.display = "none";
 }
 document.getElementById("select2"+valeur).style.display = "inline"; // pour n'afficher finalement que celui qu'on veut.
}
</script>

j'aurai aimé donner un id à chaque option, car value m’empêche de faire passer des valeurs, mais pour l'instant j’échoue.

Pouvez vous me dire si cela est possible ?

Merci d'avance

bonne soirée

elle est pas claire ta question, pour savoir, teste les id sur les option, et le mieux c’est de taper les mots cle sur google et regarder les exemples de la doc : https://www.w3schools.com/jsref/coll_select_options.asp

en fait les selects sont liées par la valeur value="1", je tente de pouvoir modifier la value à ma guise sans bricoler, et attribuer à chaque <option> une id de type option id="1"> mais je n'arrive pas à adapter le script en fonction.

Car sinon le formulaire retourne en valeur "1", après certes avec du php et des conditions je peux modifier les valeur du type 1 = blablabla, mais je préfère éviter.

les select sont liés par la valeur 1 : peux tu expliquer ta phrase？et dire exactement ce que tu veux comme resultat, car là c’est pas du tout clair.

Soit tu mets un id, soit tu vas chercher l’index de l’option, comme l’exemple de la doc :

var x = document.getElementById("mySelect").options[0].text;

Je ne sais comment m'expliquer, je ne connais pas grand chose en js.

Je souhaite que le script utilise l'id pour afficher et lier les selects.

Pour l'instant j'ai tenté ceci sans succès.

<select id="select1" onchange="app_sel(this.id);">
<option value="0 0">1</option>
<option value="0 3">2</option>
<option value="0 6">3</option>
</select>

<span id="select2">
<select id="select21" style="display:inline;">
<option id="0" value="0 1">1</option>
<option id="1" value="0 2">2</option>
<option id="2" value="0 4">3</option>
</select>

<select id="select22" style="display:none;">
<option id="3" value="0 5">4</option>
<option id="4" value="0 7">5</option>
<option id="5" value="0 8">6</option>
</select>

<select id="select23" style="display:none;">
<option id="6" value="0 10">7</option>
<option id="7" value="0 11">8</option>
<option id="8" value="0 13">9</option>
</select>
</span>

<script type="text/javascript">
function app_sel(id) { // Le param valeur servira à savoir quel select afficher
var sels = document.getElementById("select2").options.namedItem[0].text; // On récupère tous les selects dans le span id="select2"
 for(var i=0,l=sels.length;i<l;i++) { // Et on les cache tous
  sels[i].style.display = "none";
 }
 document.getElementById("select2"+id).style.display = "inline"; // pour n'afficher finalement que celui qu'on veut.
}
</script>

Le code du premier message permet bien d’afficher un select en fonction d’un autre, et value ne pose pas de probleme.

La value tu ne la vois pas, tu pourrais utiliser du texte comme ca : un, deux, trois sont visibles, mais pas 1,2,3 :

<select id="select1" onchange="app_sel(this.value);"> 
<option value="1">un</option> 
<option value="2">deux</option> 
<option value="3">trois</option>
</select> 

ensuite tes select21, 22, ou 23 vont s’afficher. Tu n’as pas besoin d’id sur les options. Si tu veux faire quelque chose d’autre, explique le avec précision, quand tu dis que value t’empeche de faire passer des valeurs, ca ne veut rien dire.

le problème est dans les values je souhaite faire passer des variables php, logiquement j'ai

<option value="<?php echo $mavariable;?>"> 12h00</option>

mais dans mon code la variable contient l'heure pour une programmation via cron, donc elle retourne comme valeur 0 12, et évidement cela empêche le script d'affichage des selects de fonctionner normalement.

Mais des que les values doivent contenir 1, 2 3 pour que le script du premier message fonctionne, si je modifie les values, le script ne fonctionne plus, d'ou mon souhait de passer par des ids.

Bonjour manudu13,

C'est vrai que c'est pas trop clair,

Je t'ai fait un exemple pour ne pas utiliser les value et avec ce que j'ai compris :

https://codepen.io/Zonecss/pen/aXQgMe

Ok, si tu mets une value 0 12, tu dois avoir un select avec un id 0 12 aussi, c’est ce que fait cette ligne :

document.getElementById("select2"+valeur)

elle va chercher le select2 suivi de la valeur, si la valeur c’est 0 12, tu dois avoir un select dont l’id est ”select20 12” : ton php doit etre dans la value et dans l’id :

<select id="select1" onchange="app_sel(this.value);"> 
<option value="<?php echo $mavariable;?>”>un</option> 
<option value="0 14">deux</option> 
<option value="3">trois</option>
</select> 
<span id="select2"> 
<select id="select2<?php echo $mavariable;?>" style="display:inline;"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select> 

PaulLou a écrit:

Ok, si tu mets une value 0 12, tu dois avoir un select avec un id 0 12 aussi, c’est ce que fait cette ligne :

document.getElementById("select2"+valeur)

Juste pour info :

La valeur d'un id ne peut pas avoir d'espace, me semble t il

0_12 serait mieux

AliasDmc c'est génial avec les attributs data-* cela fonctionne bien, mais il y à un problème, le select sélectionné est écrasé par celui de dessous par exemple :

  <select id="exemple22" class="selectb" name="vigiheuredebut">
    <option id="3" value="0 5">4</option>
    <option id="4" value="0 7">5</option>
    <option id="5" value="0 8">6</option>
  </select>

  <select id="exemple23" class="selectc" name="vigiheuredebut">
    <option id="6" value="0 10">7</option>
    <option id="7" value="0 11">8</option>
    <option id="8" value="0 13">9</option>
  </select>

oui je sais j'ai donnée le même name aux selects, du coup les deux passes dans le form, et du coup quand je recupère la variable, les données de exemple22 sont écrasé par exemple23 à cause du nom, dois je prévoir que les selects caché soit désactivée ?

Tu peux aussi regarder le html du premier exemple  permet d'envoyer l'ensemble des valeur dans un tableau,

mais c'est juste pour info

Génial, j'ai bien regardé le code, c'est super, je l'ai adapté à mes besoins, avec toutes les requêtes et conditions php, tout fonctionne.

Mille merci.