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
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>
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';
}
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');
}
}
}
}
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
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>