Contenu d'une liste qui depend d'un choix

Version imprimable

20/01/2023, 08h18
BartRoX

Contenu d'une liste qui depend d'un choix

Bonjour à tous

J'ai un besoin assez simple, mais je ne sais pas comment faire.

J'ai un radio-bouton (<input type="radio">) avec 2 choix, et en dessous une liste (<select>) dont le contenu doit dépendre du choix fait sur le radio-bouton.
Comment faire en sorte que le contenu change ?
20/01/2023, 08h58
SpaceFrog

regarde du coté du onchange de tes boutons radios pour lancer le peuplement de ton select ou l'affichage de deux selects différents

Bonjour,
cela peut également se traiter en CSS via la pseudo-classe :checked et le « sélecteur d'adjacence indirect » ~ (tilde), attention toutefois à la structure HTML !
Exemple HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- pour le 1st select -->
<input type="radio" name="check" id="radio1" checked>
<label for="radio1">Show Select#1</label>
<!-- pour le 2nd select -->
<input type="radio" name="check" id="radio2">
<label for="radio2">Show Select#2</label>
 
<select id="select1">
  <option>Un
  <option>Deux
  <option>Trois
</select>
 
<select id="select2">
  <option>Quatre
  <option>Cinq
  <option>Six
</select>

associé au CSS suivant :

Code:

1
2
3
4
5
6
7
8
9
10
#select1,
#select2 {
  display: none;
}
#radio1:checked ~ #select1 {
  display: block;
}
#radio2:checked ~ #select2 {
  display: block;
}

fait le job !

Citation:

Envoyé par SpaceFrog

regarde du coté du onchange de tes boutons radios pour lancer le peuplement de ton select ou l'affichage de deux selects différents

J'y ai pensé, et je me doute que si je passe par javascript cela va faire parti de la solution, mais j'ai du mal à voir comment le mettre en œuvre... Je débute en javascript...

NoSmoking>> Je n'aurai pas pensé que cela puisse être fait en CSS !
J'ai essayé le code exemple donné qui fonctionne parfaitement, mais quand je l'adapte à mon projet cela ne fonctionne pas... :? Les 2 select restent non-affichés, quelque soit le choix de radio-bouton. J'ai fait quelque recherche sur le ~ et ai bien compris que la structure HTML était importante, mais j'ai beau chercher je ne vois pas où est-ce que ca coince...
En gros voilà mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <div class="inputs"> <label class="label">Titre1</label> <div class="radio"> <input type="radio" id="radio1" name="choix" value="choix1" checked required="required"><label for="radio1">choix1</label> <input type="radio" id="radio2" name="choix" value="choix2" required="required"><label for="radio2">choix2</label> </div> <label class="annotation">※Blablabla</label> </div> <div class="inputs"> <label class="label">Titre2</label> <select id="select1" class="select" name="maListe" onchange="addRequired(this)"> <option value="Autre1">Autre</option> <option value="Un" selected>Un</option> <option value="Deux">Deux</option> <option value="Trois">Trois</option> </select> <select id="select2" class="select" name="maListe" onchange="addRequired(this)"> <option value="Autre2">Autre</option> <option value="a" selected>a</option> <option value="b">b</option> <option value="c">c</option> </select> <input class="input_form_right" type="text" name="Commentaire"> <script> function addRequired(me) {  } </script> </br> </div>
Le code CSS est identique à celui donné

Citation:

Les 2 select restent non-affichés, quelque soit le choix de radio-bouton. J'ai fait quelque recherche sur le ~ et ai bien compris que la structure HTML était importante, mais j'ai beau chercher je ne vois pas où est-ce que ca coince...

Pour que cela fonctionne il faut que les <input> et les <select> associé aient le même parent ce qui n'est pas le cas dans la structure que tu montres. C'est la limite, après dans certains cas le CSS permet de corriger le tir voire régler cela avec le déplacements des éléments comme par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="inputs"> <label class="label">Titre1</label> <div class="radio"> <label for="radio1">choix1</label> <label for="radio2">choix2</label> </div> <label class="annotation">※Blablabla</label> </div> <div class="inputs"> <input type="radio" id="radio1" name="choix" value="choix1" checked required="required"> <input type="radio" id="radio2" name="choix" value="choix2" required="required"> <label class="label">Titre2</label> <select id="select1" class="select" name="maListe" onchange="addRequired(this)"> <option value="Autre1">Autre</option> <option value="Un" selected>Un</option> <option value="Deux">Deux</option> <option value="Trois">Trois</option> </select> <select id="select2" class="select" name="maListe" onchange="addRequired(this)"> <option value="Autre2">Autre</option> <option value="a" selected>a</option> <option value="b">b</option> <option value="c">c</option> </select> </div>
Les <label> ciblent les <input type="radio"> qui n'ont pas le même parent.

25/01/2023, 08h49
BartRoX

Merci pour les précisions.

En partant effectivement sur les radio-boutons au même niveau que les <select> mais en les cachant, avec les labels au <div> du dessus reliés aux radio-boutons, puis en ajoutant un cadre autour des labels pour avoir un visuel sur lequel a été sélectionné, j'ai pu réussir à faire un visuel correct qui correspond à la fonction voulu. :D
Merci pour le coup de main !

PS: Du coup peut-être déplacer ce topic' dans le forum CSS serait plus approprié au vu de la tournure que les réponses ont pris ? :lol:

Si tu ne peux pas faire autrement, ce qui est rare, ou que tu préfères la gestion via JavaScript, il te faut lier ton <input type="radio"> à ton <select> cela peut se faire de la sorte en utilisant les attributs de données data-xxx.
Exemple

Code:

1
2
3
4
5
6
7
8
9
10
<div class="radio">
  <label>
    <input type="radio" id="radio1" name="choix" value="choix1" data-select="select1">
    choix1
  </label>
  <label>
    <input type="radio" id="radio2" name="choix" value="choix2" data-select="select2">
    choix2
  </label>
</div>

et plus loin dans un autre parent tes <select> identifiés

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="inputs">
  <label class="label">Titre2</label>
  <select id="select1" class="select" name="maListe">
    <option value="Autre1">Autre</option>
    <option value="Un" selected>Un</option>
    <option value="Deux">Deux</option>
    <option value="Trois">Trois</option>
  </select>
 
  <select id="select2" class="select" name="maListe">
    <option value="Autre2">Autre</option>
    <option value="a" selected>a</option>
    <option value="b">b</option>
    <option value="c">c</option>
  </select>
</div>

le code suivant te permettra de réaliser l'affichage/masquage suivant l'<input type="radio"> checked :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// récup. des radios concernés
const listRadio = document.getElementsByName("choix");
// récup. des select associés
const listSelect = document.getElementsByName("maListe");
// ajout événement sur le click aux radios
// nota : si clicked alors il est checked
for (let elem of listRadio) {
  elem.addEventListener("click", () => {
    // récup. de l'id du select lié
    const refSelect = elem.dataset.select;
    // mise à jour des select
    for (let select of listSelect) {
      select.style.display = refSelect === select.id ? "" : "none";
    }
  })
}
// on clique le 1st
listRadio[0].click();

Voilà pour compléter cette discussion.