Question

所以，我有一个表单，在那个表单中是<select>。根据选择的内容（选择了<option>），我希望表格内容能够即时更改（即在用户点击其他内容之前）。

例如，如果用户选择Photo Upload选项，则会显示文件上传框，如果他们选择Text Entry，则会出现一个文本框来代替该文件上传框。

感谢。

Answer 1

使用onchange事件触发文件上传（或其他）。

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

这使用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>

使用JavaScript根据<select>内容</select>修改页面

3 个答案: