Javascript - Simple script de formulaire pour cacher/montrer des champs

Je cherche un script simple en javascript que je peux étendre, à un niveau de base Im cherchant à montrer 1 champ basé sur quelle option d'un <select> l'utilisateur choisit.Javascript - Simple script de formulaire pour cacher/montrer des champs

<select id="options"> 
    <option value="spoon">Spoon</option> 
    <option value="form">Fork</option> 
</select> 

if select=spoon { 
    <input>enter your favorite soup</input> 
} else { 
    <input>Your gonna need a knife</input> 
}

Simple JS est la clé!

Source

2010-05-12 CLiown

Quelque chose comme this? il est appelé Chained choisit

Source

2010-05-12 13:47:56 vsync

Vous pouvez utiliser l'attribut onchange de l'élément <select> pour exécuter un code JavaScript à chaque changement de la liste déroulante.

<select onchange="myFunction(this)">

(vous voyez que je suis passé l'élément de menu déroulant lui-même comme argument de méthode, cela est juste fait pour des raisons pratiques)

Vous pouvez utiliser le element.options pour obtenir toutes les options et element.selectedIndex pour obtenir l'indice du moment option sélectionnée.

function myFunction(dropdown) { 
    var selectedOption = dropdown.options[dropdown.selectedIndex].value; 
}

Vous pouvez utiliser document.getElementById() pour récupérer tout élément par id. Imaginez que vous avez les éléments d'entrée suivants:

<input type="text" id="foo"> 
<input type="text" id="bar">

alors vous pouvez les obtenir comme suit:

var foo = document.getElementById('foo'); 
var bar = document.getElementById('bar');

Vous pouvez utiliser le element.style.display pour modifier la propriété CSS display. Une valeur de block signifie afficher et une valeur de none signifie masquer. Maintenant, faites le calcul:

function myFunction(dropdown) { 
    var selectedOption = dropdown.options[dropdown.selectedIndex].value; 
    var foo = document.getElementById('foo'); 
    var bar = document.getElementById('bar'); 

    if (selectedOption == 'spoon') { 
     foo.style.display = 'none'; // Hide foo. 
     bar.style.display = 'block'; // Show bar. 
    } else { 
     foo.style.display = 'block'; // Show foo. 
     bar.style.display = 'none'; // Hide bar. 
    } 
}

Pour en savoir plus sur Javascript et HTML DOM, je vous recommande this tutorial.

Source

2010-05-12 13:47:59 BalusC

Une autre approche est d'avoir le gestionnaire d'événements pour des modifications à la sélection conduire une valeur de nom de classe sur le formulaire. Ensuite, vous pouvez contrôler ce qui est visible dans chaque état via CSS. Sale, bien sûr, s'il y a beaucoup d'options, mais cela signifie que vous laissez les entrailles du navigateur faire le travail DOM. – Pointy

@Pointy: Nous pouvons également lui proposer jQuery. Commencer simplement simple;) – BalusC

Je pense que j'ai posté cet endroit ailleurs sur SO, mais je ne pouvais pas trouver ce poste maintenant. Cela pourrait être quelque chose pour vous de construire.
Regardez ma, pas de jQuery! (youpi!)

<body> 

<select id="mySelect" onchange="npup.doSelect(this);"> 
    <option value="">Npup says 'select'</option> 
    <!-- the option values are suffixes for the elements to show --> 
    <option value="0">zero</option> 
    <option value="1">one</option> 
    <option value="2">two</option> 
</select> 
<!-- container for any elements that are to be in the game --> 
<div id="mySpecialElements"> 
    <!-- these have ids that end with an index for easy retrieval in "findeElement" function below--> 
    <div id="npup0" class="hidden">div 0</div> 
    <div id="npup1" class="hidden">div 1</div> 
    <div id="npup2" class="hidden">div 2</div> 
</div> 

<script type="text/javascript"> 

window.npup = (function (containerId, baseId) { 
    // save the container of your special element 
    var elementsContainer = document.getElementById(containerId); 
    var baseId = baseId; 
    function doSelect(select) { 
     // get value of select 
      var idx = select.selectedIndex; 
      if (idx<0) {return;} 
     var value = select.options[idx].value; 
     // find element based on the value of the select 
     var targetDiv = findElement(value); 
     if (!targetDiv) { return;} // didn't find the element, bail 
     // do magic.. 
     hideAll(elementsContainer); 
     showElement(targetDiv); 
    } 
    // retrieve some element based on the value submitted 
    function findElement(value) { 
     return document.getElementById(baseId+value); 
    } 
    // hide all element nodes within some parent element 
    function hideAll(parent) { 
     var children = parent.childNodes, child; 
     // loop all the parent's children 
     for (var idx=0, len = children.length; idx<len; ++idx) { 
      child = children.item(idx); 
      // if element node (not comment- or textnode) 
      if (child.nodeType===1) { 
       // hide it 
       child.style.display = 'none'; 
      } 
     } 
    } 
    // display a certain element 
    function showElement(element) { 
     element.style.display = ''; 
    } 
    // hide all on page load (might want some extra logic here) 
    hideAll(elementsContainer); 

    // export api to use from select element's onchange or so 
    return { 
     doSelect: doSelect 
    }; 
})('mySpecialElements', 'npup'); // give the routine a container id of your special elements, and the base id of those elements 


</script> 

</body>

Source

2010-05-12 13:49:52 npup

'var value = select.value;' ne fonctionnera pas. – BalusC

Ops, merci - l'a réparé. Il a fait son chemin parce qu'il "a fonctionné" (ff3.6.3, et beaucoup plus de navigateurs aussi je pense). – npup

Javascript - Simple script de formulaire pour cacher/montrer des champs

Répondre

Questions connexes