Zone de saisie dynamique/dépendante

Comment puis-je créer une zone de saisie apparaissant uniquement lorsque je sélectionne une valeur dans une liste déroulante?Zone de saisie dynamique/dépendante

merci, Sebastian

EDIT-1:

Merci les gars pour l'aide. mais l'exemple de sushil bharwani est le mieux pour moi, car j'ai aussi besoin d'afficher un texte avec la zone de texte. Mais avec cet exemple, j'ai un problème. Le texte et la zone de texte ressemblent tous deux à la même cellule, ce qui perturbe ma mise en forme pour le formulaire. Vous avez des idées?

grâce,

Source

2010-06-17 sebastian

-1

http://bytes.com/topic/javascript/answers/88791-show-hide-text-form-field-based-drop-down-selection

Source

2010-06-17 14:30:53

Vous souhaitez définir la sélection est onchange attribut pour vérifier le texte (ou valeur) de l'option choisie:

<script type="text/javascript"> 
function checkSelect(el) { 
    if (el.options[el.selectedIndex].text.length > 0) 
    document.getElementById('text1').style.display = 'block'; 
    else 
    document.getElementById('text1').style.display = 'none'; 
} 
</script> 

<select onchange="checkSelect(this)"> 
<option></option> 
<option>Val 1</option> 
</select> 

<input type="text" id="text1" style="display:none" />

Pour plus de détails, vous peut en savoir plus sur les objets HTML DOM et comment y accéder via javascript:

http://www.w3schools.com/jsref/default.asp

Source

2010-06-17 14:44:49 webbiedave

Tenir compte que la zone de texte doit faire lorsque le choix 2 est sélectionné

La boîte déroulante

<select id="dropBox" size="1" onChange="dropBoxChng();"> 
    <option value="1">Choice 1</option> 
    <option value="2">Choice 2</option> 
    <option value="3">Choice 3</option> 
    <option value="4">Other</option> 
</select>

la zone de saisie

<input type="text" id="txtBox" style="display:none">

la fonction onchange

function dropBoxChng(){ 
    if(document.getElementById('dropBox').value == 2){ 
     document.getElementById('txtBox').style.display = 'block'; 
    } 
}

Demo here

Source

2010-06-17 14:51:30

<html> 
<head> 
<style type="text/css"> 
input { 
    font-family: Arial, Sans-Serif; 
    font-size: 13px; 
    margin-bottom: 5px; 
    display: block; 
    padding: 4px; 
    border: solid 1px #85b1de; 
    width: 300px; 
    background-color: #EDF2F7; 
} 

option { 
color: white; 
background-color: blue; 
} 

.even { 
    background-color: red; 
    color: blue; 
} 
</style> 
<script> 
function replaceElement(){ 
    var select=document.getElementById('mySelectMenu'); 
    var chosenoption=select.options[select.selectedIndex]; 
    var oChild= document.getElementsByTagName('input'); 
    var br1= document.getElementsByTagName('br'); 
    var temp=br1.length; 
    for(var i=0; i<temp; i++){ 
     alert("remove input box " + i); 
     myform.removeChild(oChild[0]); 
     alert("remove br " + i); 
     myform.removeChild(br1[0]); 
    } 
    for(var i=0; i<chosenoption.value; i++){ 
     alert("add br " + i); 
     var br2 = document.createElement('br'); 
     myform.appendChild(br2); 
     alert("add input box " + i); 
     var oNewChild=document.createElement('input'); 
     oNewChild.type='text'; 
     oNewChild.size=6; 
     myform.appendChild(oNewChild); 
    } 
} 
</script> 
</head> 
<body> 
<form id="myform"> 
<select id="mySelectMenu" onchange="replaceElement()"> 
    <option value="1">1</option> 
    <option value="2" class="even">2</option> 
    <option value="3">3</option> 
    <option value="4" class="even">4</option> 
    <option value="5">5</option> 
</select> 
</form> 
</body> 
</html>

Source

2011-07-13 14:05:12 weirdFactory

Zone de saisie dynamique/dépendante

Répondre

Questions connexes