Afficher valeur au clic

Version imprimable

Bonjour à tous,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="col-sm-5">
       <div class="form-group">
    <label for="p1"> Project :</label>
<select id="p1" class="form-control" required name="p1">
   <option  value="RAS">RAS</option> 
<?php  while($rows = $resultset->fetch_assoc())
          
        $test = $rows['id'];                  {
        $test2 = $rows['id']."-".$rows['name'];
        echo"<option value='$test'>$test</option>"; }
 
 ?>

Je veux bien afficher dans le menu déroulant que la valeur de $test c'est à dire que les id de ma table. Et seulement après avoir cliqué sur un champs du menu déroulant afficher la valeur $test2 qui est id-nom du champs sélectionné.
Merci beaucoup de votre aide

11/02/2021, 21h30
javatwister

Afficher oû???
11/02/2021, 21h37
hichamus13

salut, Je veux l'afficher dans le menu déroulant
Merci
12/02/2021, 09h03
SpaceFrog

Chronologie ...

Affichage de la page
Click sur un "champs" du menu déroulant ( on dit plutôt item ou option )
Affichage de je ne sais pas quoi je ne sais pas ou mais qui vient de la base de données ?

Bref c'est loin d'être clair ...
12/02/2021, 09h26
hichamus13
Salut,
Normalement j'affiche dans les items de mon menu déroulant le champs 'id' d'une de mes tables nommée 'projets' (id, nomProjet, ....).
Je veux, en cliquant sur un item de mon select que l'id de cet item se transforme en 'id-nom'.
Exemple :

j'ai les identifiants des projets dans mon menu déroulant
Code:

1 2 3 4 5 1 2 3 4
Si je clique sur le 1 je veux cet affichage
Code:

1 2 3 4 5 1-Nom du projet 2 3 4
J'espère que j'ai été clair
12/02/2021, 13h53
SpaceFrog

Si je comprends bien tu veux rajouter dans le innerHTML de l'option le texte correspondant ?
12/02/2021, 13h56
hichamus13

Oui exactement
12/02/2021, 14h01
SpaceFrog

A part le fait que je ne vois vraiment pas pourquoi tu ne colle pas le texte dès le départ ...
Le label de l'option se trouve ou ? en base de données ?
Tu veux faire un ajax pour le récupérer ou le précharger dans un array pour éviter un aller retour client ?
Que se passe-t-il si le user choisit une autre option après ? est-ce un multiselect ?
12/02/2021, 14h26
hichamus13

Le label de l'option se trouve à la base de donnée c'est le fameux p1. Ce n'est pas un multiselect, et si l'utilisateur choisit une autre option après, la valeur de l'option précédante revient à sa valeur initiale.
Merci beaucoup
12/02/2021, 16h36
SpaceFrog

Difficile d'intercepter le click sur une option ...
il faudrait plutot passer par le onchange du select...
12/02/2021, 16h43
hichamus13

Sinon y'aurait -il moyen de garder le id du projet sur l'option du select et d'afficher le nom du projet correspondant à l'id dans un input texte à côté ?
J'ai essayé de le faire mais je n'arrive pas vu que je suis novice en javascript
12/02/2021, 16h56
SpaceFrog

ça c'est plus simple en effet, il te suffit de mettre le texte dans le value d l'option ...

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
   <div class="col-sm-5">
       <div class="form-group">
    <label for="p1"> Projet :</label>
<select id="p1" class="form-control" required name="p1">
   <option  value="ABSENT">ABSENT</option>
<?php  while($rows = $resultset->fetch_assoc())
                            {
                $test = $rows['id']."-".$rows['name'];
                $test2 =$rows['name'];
                $test22 =$rows['id'];
                echo"<option value='$test'>$test22</option>"; }
 
 ?>
</select>
    </div>
    </div>
 
   <div class="row">
    <div class="col-sm-6">
       <div class="form-group">
    <label for="name">Nom</label>
    <input id="name" type="text" readonly class="form-control" name="name" value=""><script></script>
    </div>
    </div>

Qu'est ce que je dois mettre dans la balise du script pour récupérer le nom du projet selon son id ?

12/02/2021, 17h17
SpaceFrog

ben récupère la value du select ...
13/02/2021, 11h28
hichamus13

Je le fais comment ?
13/02/2021, 12h32
javatwister

Avant ton select, ajoute un <div></div> avec un id:

Code:

<div id="projet"></div>

Reprends cette ligne:

Code:

<select id="p1" class="form-control" required name="p1">

et transforme-la comme ça:

Code:

<select id="p1" class="form-control" required name="p1" onchange="document.getElementBId('projet').textcontent=this.value">
15/02/2021, 08h31
hichamus13

Merci pour la réponse.
Je n'ai aucun changement
15/02/2021, 08h48
SpaceFrog

Parce que JT est taquin et qu'il a inséré une coquille pour te donner à réfléchir ...

Code:

.getElementBId

Cherchez l'erreur ..

Oui j'avais changé. Voici le code modifié

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="projet">
    <label for="p1"> Projet :</label>
<select id="p1" class="form-control" required name="p1" onchange="document.getElementById('projet').textcontent=this.value">
 
   <option  value="RAS">RAS</option> 
<?php  while($rows = $resultset->fetch_assoc())
                            {
                $test = $rows['id']."-".$rows['name'];
$test2 = $rows['id'];
                echo"<option value='$test'>$test2</option>"; }
 
 ?>
</select>
 
</div>
 
    </div>
    </div>

15/02/2021, 09h23
SpaceFrog

https://jsfiddle.net/ap6q8jyv/1
15/02/2021, 10h46
hichamus13

Merci de votre aide.
ça marche très bien.