Using JavaScript to Modify a Page on the Fly based on <select> contents

Question

So, I've got a form and within that form is a <select>. Based on what that select is(what <option> is selected), I want the contents of the form to change on the fly(i.e. before the user clicks anything else).

For example, if the user selects the Photo Upload option, a file upload box will appear, and if they select Text Entry, a text box will appear in place of that file upload box.

Thanks.

Answer 1

Use the onchange event to trigger the file upload (or whatever).

Answer 2

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 3

this using jquery:

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

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

expects such 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>