Использование JavaScript для изменения страницы на лету на основе содержимого <select>

Question

Итак, у меня есть форма, и внутри этой формы есть <select>. Исходя из того, что выбрано (что выбрано <option>), я хочу, чтобы содержимое формы изменялось на лету (т. Е. До того, как пользователь щелкнет что-либо еще).

Например, если пользователь выбирает параметр Photo Upload, появится окно загрузки файла, а если они выберут Text Entry, вместо этого поля загрузки файла появится текстовое поле.

Спасибо.

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

это с помощью jquery:

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

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

ожидает такой 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>

Answer 3

Используйте событие onchange для запуска загрузки файла (или чего-либо еще).