Utiliser JavaScript pour modifier une page à la volée basée sur <select> contents

Question

Donc, j'ai un formulaire et sous cette forme est un <select>. En fonction de ce que cette sélection est (ce que <option> est sélectionné), je veux que le contenu du formulaire change à la volée (c'est-à-dire avant que l'utilisateur ne clique sur autre chose). Par exemple, si l'utilisateur sélectionne l'option Photo Upload, une boîte de téléchargement de fichier apparaîtra, et s'il sélectionne Text Entry, une zone de texte apparaîtra à la place de cette boîte de téléchargement de fichier.

Merci.

Answer 1

function swapDiv(index) { 
    var html = ''; 
    switch(index) { 
     ... // assign html var based on index; 
    } 
    div.innerHTML = html; // assign div html to html var 
} 
select.onchange = function() { 
    swapDiv(this.selectedIndex); 
} 

Answer 2

Utilisez l'événement onchange pour déclencher le téléchargement de fichier (ou autre).

Answer 3

ce en utilisant jquery:

$(function() 
{ 
    var shown = $($('#my-select').val()); 

    $('#my-select').change(function() 
    { 
     shown.hide(); 
     shown = this.form.find($(this).val()).show(); 
    }); 
}); 

demande que ces html:

<style> 
textarea, input { display: none; } 
</style> 
<form id="my-form"> 
    <textarea id="text-entry"></textarea> 
    <input type="file" id="file-upload"> 
    <select id="my-select"> 
    <option value="#text-entry">Text Entry</option> 
    <option value="#file-upload">File Upload</option> 
    </select> 
</form>