我正在使用以下jQuery函数在选择框中选择值时显示特定形式。

<script>
$("#selectCategory").on("change", function() {
    $("#" + $(this).val()).show();
})
</script>


选择选项值与表单ID匹配。我面临的问题是,在第一个onchange事件上,代码可以正常运行。但是,在随后的onchange事件中,新表单将追加到现有表单上。例如,如果我选择#xyz选项,则呈现#xyz表单。但是现在,如果我将选择选项更改为#abc,则#abc表单将附加到#xyz表单中。

如果用户更改其选择,则应删除原始表单,然后呈现新表单。例如,如果在选择#xyz选项后选择#abc选项,则应删除#xyz表单,并在其位置显示#abc表单。

<select id="selectCategory" name="category" style="width:100%;" tabindex="1">
        <option value=""></option>
        <option value="book">Textbooks/Course Material</option>
        <option value="compexam">Entrance Exam Books</option>
</select>

<form class="upload" id="book" onsubmit="return checkUpload();" action="" method="POST" enctype="multipart/form-data" style="display:none">
<form class="upload" id="compexam" onsubmit="return checkUpload();" action="" method="POST" enctype="multipart/form-data" style="display:none" >


我希望这是可以理解的!

最佳答案

尝试这个:

<script>
$("#selectCategory").on("change", function() {
    $("form").hide();
    $("#" + $(this).val()).show();
})
</script>


首先,您需要隐藏表单,然后显示所需的表单。

在您的情况下,您仅显示表单,即每次显示一个表单并将其与其他表单一起附加。

10-05 20:49
查看更多