web-dev-qa-db-fra.com

comment activer une zone de texte si je sélectionne une autre option dans la liste déroulante

supposons que j'ai 3 options dans une liste déroulante dire rouge, bleu, autres . Si un utilisateur sélectionne une option comme une autre, une zone de texte doit être visible en dessous pour indiquer sa couleur préférée . Je peux remplir la liste déroulante avec des couleurs mais je ne sais pas comment apporter une zone de texte visible lors de la sélection des autres dans le fichier boîte déroulante. Je sais que javascript est possible, mais javascript est relativement nouveau pour moi. Quelqu'un peut-il m'aider s'il vous plaît en dehors??

C’est l’option de sélection que je m’implémente sous ma forme HTML

   <select name="color"> // color
    <option>pick a color</option>  
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="others">others</option>
</select>

<input type="text" name="color" id="color" /></td> // this textbox should be hidden //until unless others is selected in the drop down box
javascripthtmlhtml5
7
Shashi Roy

Vous trouverez ci-dessous le code JavaScript essentiel que vous devez écrire:

<html> 
<head>  
<script type="text/javascript">
function CheckColors(val){
 var element=document.getElementById('color');
 if(val=='pick a color'||val=='others')
   element.style.display='block';
 else  
   element.style.display='none';
}

</script> 
</head>
<body>
  <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option>  
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="others">others</option>
  </select>
<input type="text" name="color" id="color" style='display:none;'/>
</body>
</html>
27
Umesh Patil

Codé un exemple à http://jsbin.com/orisuv

HTML

<select name="color" onchange='checkvalue(this.value)'> 
    <option>pick a color</option>  
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="others">others</option>
</select> 
<input type="text" name="color" id="color" style='display:none'/>

Javascript 

function checkvalue(val)
{
    if(val==="others")
       document.getElementById('color').style.display='block';
    else
       document.getElementById('color').style.display='none'; 
}
7
Clyde Lobo

En ligne:

<select 
onchange="var val = this.options[this.selectedIndex].value;
this.form.color[1].style.display=(val=='others')?'block':'none'">

Je faisais ça

Dans la tête (donnez à la sélection un ID):

window.onload=function() {
  var sel = document.getElementById('color');
  sel.onchange=function() {
    var val = this.options[this.selectedIndex].value;
    if (val == 'others') {
      var newOption = Prompt('Your own color','');
      if (newOption) {
        this.options[this.options.length-1].text = newOption;
        this.options[this.options.length-1].value = newOption;
        this.options[this.options.length] = new Option('other','other');
      }
    }
  }
}
2
mplungjan

Simplement

<select id = 'color2'
        name = 'color'
        onchange = "if ($('#color2').val() == 'others') {
                      $('#color').show();
                    } else {
                      $('#color').hide();
                    }">
  <option value="red">RED</option>
  <option value="blue">BLUE</option>
  <option value="others">others</option>
</select>

<input type = 'text'
       name = 'color'
       id = 'color' />

edit: nécessite le plugin JQuery

1
CKKiller

Comme Umesh Patil, dans ma réponse, commente qu'il y a un problème ... je tente d'éditer la réponse et d'être rejeté. Et faites-vous suggérer de poster une nouvelle réponse… .. Ce code devrait résoudre le problème qu'ils ont (Shashi Roy, Gaven, John Higgins).

<html> 
<head>  
<script type="text/javascript">
function CheckColors(val){
 var element=document.getElementById('othercolor');
 if(val=='others')
   element.style.display='block';
 else  
   element.style.display='none';
}

</script> 
</head>
<body>
  <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option>  
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="others">others</option>
  </select>
<input type="text" name="othercolor" id="othercolor" style='display:none;'/>
</body>
</html>
0
gongsun