Cómo mostrar diferentes tipos de entrada dependiendo de la opción seleccionada de una lista desplegable usando javascript en la aplicación web asp.net

Estoy desarrollando una aplicación web con vb.net y asp.net.

En esta aplicación web, uno de los formularios web es como a continuación Nuevo estado (requerido)

Las opciones / datos que se muestran en la lista desplegable anterior provienen de la base de datos y también son condicionales. estas opciones no son fijas todo el tiempo. Son visibles en función de una selección previa por parte del usuario.

Entre esos datos hay 3 datos para los cuales quiero mostrar 3 tipos de entrada diferentes. El ID de estas 3 opciones / datos son 10, 11 y 12.

Quiero mostrar diferentes tipos de entrada debajo de esta lista desplegable dependiendo de los datos seleccionados en la lista desplegable.

Ejemplo

Si en la lista desplegable el ID de datos seleccionado es 10, quiero mostrar un cuadro de texto debajo de la lista desplegable.

Si en la lista desplegable el ID de datos seleccionado es 12, quiero mostrar un calendario debajo de la lista desplegable.

  

Para el rest de los datos no quiero hacer nada. ¿Cómo puedo hacerlo con javascript? Por favor ayúdame con el código.

Gracias

Código editado

   
function displayDiv() { if ($("#comNewStatus").val() == "1") { $("#cal").show(); } else { $("#cal").hide(); } } function RefreshParent() { if (window.opener != null && !window.opener.closed) { window.opener.location.reload(); } } window.onbeforeunload = RefreshParent;

Todas las referencias de jquery y ko-js se han hecho en el archivo maestro.

Agregue jquery y agregue identificadores a sus divs, ocúltelos de manera predeterminada (mostrar: ninguno) y luego muéstrelos en el evento onchange del control de selección.

Edición: se agregó la resolución de la identificación de control adecuada en caso de páginas maestras / de detalles