Visualización dinámica de formularios de jQuery en opción seleccionada - javascript, jquery, formularios, onchange

Estoy usando la siguiente función jQuery para mostrar un formulario específico al seleccionar un valor en un cuadro de selección.

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

El valor de la opción de selección coincide con el formulariocarné de identidad. El problema al que me estoy enfrentando es que en el primer evento onchange, el código funciona bien. Pero en los eventos subsiguientes onchange, el nuevo formulario se agrega al formulario existente. Por ejemplo, si selecciono la opción #xyz, entonces el formulario #xyz se muestra. Pero ahora, si cambio mi opción de selección a #abc, el formulario #abc se agrega al formulario #xyz.

Si un usuario cambia su selección, el originalEl formulario debe ser eliminado y luego el nuevo formulario debe ser procesado. Por ejemplo, si elijo la opción #abc después de elegir la opción #xyz, el formulario #xyz debería eliminarse y el formulario #abc debería mostrarse en su lugar.

<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" >

Espero que esto sea comprensible!

Respuestas

Prueba esto:

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

Primero debe ocultar el formulario y luego mostrar el formulario que desee.

En su caso, solo está mostrando los medios de los formularios cada vez que se mostrará un formulario y se adjuntará con el otro.

Deberías esconder las otras formas entonces ...

<script>
$("#selectCategory").on("change", function() {
$("form").hide(); //Hide all forms first
$("#" + $(this).val()).show(); //Show only what you want
})
</script>

Espero que esto ayude...

Solución

Puede ocultar todos los demás formularios primero y luego mostrar solo el formulario de destino específico después del evento, como este:

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

$("#selectCategory").on("change", function() {
$(".showable").hide();
$("#" + $(this).val()).show();
})

div {
width: 40px;
height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="showable" id="div1" style="background-color: #f00; display: none;"></div>
<div class="showable" id="div2" style="background-color: #0f0; display: none;"></div>
<div class="showable" id="div3" style="background-color: #00f; display: none;"></div>
<br>
<select id="selectCategory">
<option value="">-- please choose --</option>
<option value="div1">Red</option>
<option value="div2">Green</option>
<option value="div3">Blue</option>
</select>

Echa un vistazo a esta solución:

https://jsfiddle.net/g2cdygd0/

JS:

$("#selectCategory").on("change", function() {
$(".formShownBySelect").hide();
$("#" + $(this).val()).show();
});

HTML:

<select id="selectCategory">
<option value="xyz">XYZ</option>
<option value="abc">ABC</option>
</select>

<form id="xyz" class="formShownBySelect">
<label>I"m form XYZ</label>
</form>

<form id="abc" class="formShownBySelect">
<label>I"m form ABC</label>
</form>

CSS:

#xyz, #abc {
display: none;
}

¡Espero eso ayude!