Input visible ou pas selon le choix d'un select

**CrasherSEP** · 26/05/2016, 11h05

Bonjour,

J'ai une liste déroulante avec plusieurs choix. un des choix est : "autre"

J'aimerais faire apparaitre un input juste en dessous si le choix se porte sur "autre".

J'ai cherché sur le web, mais je n'ai rien trouvé de concluant...

Pourriez-vous m'aider ?

Merci d'avance :-)

**chadoum** · 26/05/2016, 12h23

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
 
</head>
<body>
    <select id="ddl">
        <option value="test">TEST</option>
        <option value="other">AUTRE</option>
    </select>
    <input type="text" name="name" id="inputToDisplay" style="display:none" />
    <script>
        var select = document.getElementById( "ddl" )
        select.addEventListener( "change", function ( e )
        {
            var input = document.getElementById( "inputToDisplay" )
 
            if ( e.target.value == "other" )
                input.style.display = "inline-block"
            else
                input.style.display = "none"
        } )
    </script>
</body>
</html>

**CrasherSEP** · 26/05/2016, 13h32

Merci, cela fonctionne nickel... mais j'aimerais plutôt comme cela, et là ça ne fonctionne pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
 
<script language="Javascript">
function activer() 
{
          var select = document.getElementById( "ddl" )
        select.addEventListener( "change", function ( e )
        {
            var input = document.getElementById( "inputToDisplay" )
 
            if ( e.target.value == "other" )
                input.style.display = "inline-block"
            else
                input.style.display = "none"
        } )
    </script>
 
</head>
<body>
    <select id="ddl" onchange="activer();">
        <option value="test">TEST</option>
        <option value="other">AUTRE</option>
    </select>
    <input type="text" name="name" id="inputToDisplay" style="display:none" />
 
</body>
</html>

J'aimerais en plus de faire apparaitre l'input "inputToDisplay", faire aussi apparaitre un petit texte juste avant :

- Si autre : [Input]

Ps : Est-il possible d'utiliser ces commandes au lieu des vôtres ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.pgenerate.autres.hidden=true;
document.pgenerate.autres.disabled=true;

**chadoum** · 26/05/2016, 13h47

Pour déclencher l'action à partir du onchange, tu dois modifier ce qui se passe dans ta fonction Activer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
 
    <script>
        function activer()
        {
            var select = document.getElementById( "ddl" )
 
            var otherFields = document.querySelectorAll( ".toDisplay" )
 
            if ( select.value == "other" )
                Array.from( otherFields ).forEach( function ( input ) { input.style.display = "inline-block" } )
            else
                Array.from( otherFields ).forEach( function ( input ) { input.style.display = "none" } )
        }
    </script>
 
</head>
<body>
    <select id="ddl" onchange="activer();">
        <option value="test">TEST</option>
        <option value="other">AUTRE</option>
    </select>
    <span class="toDisplay" style="display:none">Si autre : </span>
    <input type="text" name="name" class="toDisplay" style="display:none" />
 
</body>
</html>

J'ai également ajouté le champ texte avant l'input mais je pense que tu aurais pu le faire seul !

Pour la dernère question, je ne sais pas d'où te vient la propriété pgenerate sur document ?...

**CrasherSEP** · 26/05/2016, 14h02

Super, merci :-)

**NoSmoking** · 26/05/2016, 19h22

Bonjour,
Attention toutefois Array.from( otherFields ).forEach( n'est pris en compte par IE que dans sa déclinaison EDGE, il faudra surement avoir recours à un polyfill.

Input visible ou pas selon le choix d'un select

JavaScript

Vue hybride

Discussions similaires

Partager

Partager