Récupération de données d'une liste vers input

Version imprimable

Bonjour à toutes et à tous

Voilà j'essai de composer un petit script qui fonctionne à moitie

Mon but c'est c'est d'avoir une liste déroulante, en cliquant dessus récupérer les deux valeurs dans deux inputs différents

Voici ma page

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 
  <script>
    function myFunction() {
    let elem = document.querySelectorAll(".drop-down");
 
    elem.forEach(element=>{
        element.addEventListener("click", e =>{
            console.log(e.target.innerHTML);
        });
    })
}
 
myFunction();
 
</script>
 
</head>
 
<body>
    <select id="liste" onchange="run()">  <!--Call run() function-->
        <option value="banane">fruit</option>
        <option value="haricot">légume</option>
        <option value="pomme">fruit</option>
        <option value="patate">légume</option>
   </select><br><br>
   TextBox1<br>
   <input type="text" id="champ1" placeholder="ici la valeur"><br>
   TextBox2<br>
   <input type="text" id="champ2"  placeholder="ici le texte"><br>
 
   <script>
    function run() {
        document.getElementById("champ1").value = document.getElementById("liste").value;
        document.getElementById("champ2").value = document.getElementById("liste").obj.value;
    }
</script>
</body>
 
</html>

j'arrive bien a afficher le .value dans le champ1 mais pas le texte dans le champ2

Code:

<optionvalue="banane">fruit</option>

j'aimerai
input1 ="banane"
input2 = "fruit"

Quelqu'un peut il m'aider à modifier mon script

Merci à vous

13/04/2023, 13h30
javatwister
Bonjour,

La FAQ indique pas mal ce genre de manip;

Dans ton cas, ajoute this en argument quand tu appelles ta fonction; tu récupèreras ainsi le select lui-même et ça rendra ton code plus lisible.

Code:

<select id="liste" onchange="run(this)">
Code:

1 2 3 4 function run(s) { document.getElementById("champ1").value = s.value; document.getElementById("champ2").value = s[s.selectedIndex].text; }

Merci "javatwister", cela fonctionne très très bien.

Voici pour ceux qui le souhaite mon petit code bien complété par javatwister

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 
  <script>
    function myFunction() {
    let elem = document.querySelectorAll(".drop-down");
 
    elem.forEach(element=>{
        element.addEventListener("click", e =>{
            console.log(e.target.innerHTML);
        });
    })
}
myFunction();
</script>
 
</head>
 
<body>
 
    <select id="liste" onchange="run(this)">
        <option value="0">Select</option>
        <option value="8">huit</option>
        <option value="5">cinq</option>
        <option value="4">quatre</option>
   </select><br><br>
   TextBox1<br>
   <input type="text" id="champ1" placeholder="ici la valeur"><br>
   TextBox2<br>
   <input type="text" id="champ2"  placeholder="ici le texte"><br>
 
   <script>
    function run(s) {
    document.getElementById("champ1").value = s.value;
    document.getElementById("champ2").value = s[s.selectedIndex].text;
}
</script>
</body>
 
</html>

Encore merciiiiiiiii

[QUOTE=javatwister;11938285]

Re bonjour, je reviens vers toi pour te montrer ce que j'ai fait et ma dernière problématique.

Voici le code de mon select:

Code:

1
2
3
4
5
6
7
8
9
10
11
     <select size="7" id="liste" onchange="run(this)">
	      	<?php include('../config.php');
                        $select = "select * FROM cis ORDER BY centre ASC"; 
                        $result = $conn->query($select);
                        $total = mysqli_num_rows($result);
                        while($donnees = mysqli_fetch_array($result))
                        {
                        ?>
            <option value="<?php echo $donnees['abrev'] ?>"><?php echo $donnees['centre']; ?></option>
			<?php } ?>
   </select

ce code va chercher mes données dans ma base

Voici mes inputs et la fin du script:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
      <td><input type="text" name="cis" id="cis" placeholder="" onkeyup="this.value=this.value.toUpperCase()" required="required" />
 
 
      <td>
      <input type="text" name="abrev" id="abrev" placeholder="" onkeyup="this.value=this.value.toUpperCase()" required="required" />
      <br />
      <input type="text" name="id" id="id" required="required" /></td>
      </td>
 
      <script>
    function run(s) {
    document.getElementById("abrev").value = s.value;
    document.getElementById("cis").value = s[s.selectedIndex].text;
}
</script>

Je tiens à préciser que tout fonctionne très très bien grâce à toi.

Cependant quand je clique dans la liste sur 1 de mes enregistrements afin de remonter les infos dans les inputs (ce qui je le rappel fonctionne très bien), j'aimerai remonter dans un troisième input l'ID de l'enregistrement, ce qui me permettra d'effectuer des modifs sur cet enregistrement

Pourriez vous m'aider

encore merci merci beaucoup

Il faudrait que tu stockes l'id dans l'option du select, sous forme d'attribut data:

Code:

<option value="<?php echo $donnees['abrev'] ?>" data-id="<?php echo $donnees['id'] ?>"><?php echo $donnees['centre']; ?></option>

et pour copier l'id où tu veux, tu ajoutes une ligne à la fonction run:
Code:

1 2 3 4 5 function run(s) { document.getElementById("abrev").value = s.value; document.getElementById("cis").value = s[s.selectedIndex].text; document.getElementById("id").value = s[s.selectedIndex].dataset.id; }

16/04/2023, 08h07
UDSP50

Ca fonctionne super

Je ne savais pas qu'il était possible de stocker une valeur de cette façon.

Encore merci merci :hola: