0

buenas intento mostrar una capa cuando en una de las opciones del formulario se elija opcion, cone ste codigo en js:

function mostrarReferencia(){
//Si la opcion con id Conocido_1 (dentro del documento > formulario con name fcontacto >     y a la vez dentro del array de Conocido) esta activada
if (document.formulario.tamanio.value != "") {
    //muestra (cambiando la propiedad display del estilo) el div con id 'desdeotro'
    document.getElementById('resto').style.display='block';
    //por el contrario, si no esta seleccionada
} else {
    //oculta el div con id 'desdeotro'
    document.getElementById('resto').style.display='none';
}

}

pero no me está funcionando el caso es que el codigo lo tengo funcionando con radiobutton pero al pasarlo a un selector ha dejado de funcioanrme

El formulario inicia así:

y el selector que debe mostrar es éste:

<select class="form-control form-control-lg" name="tamanio" id="tamanio" required>
    <option value="">Elige opción</option>
    <option value="30">30</option>
    <option value="45">45</option>
    <option value="75">75</option>
    <option value="100">100</option>
    <option value="125">125</option>
    <option value="150">150</option>
</select>

pero no me está funcionando y no encuentro el problema

la llamada al fichero js la tengo encima del form de la sigueinte forma:

<script type="text/javascript" src="js/formulario.js" ></script>

si alguien me puede ayudar agradecería mucho

un saludo

1

2 respuestas 2

1

La pregunta es un poco confusa, pero supongo que lo que quieres es que cuando el valor del select cambie te muestre un elemento con el id resto.

Yo he puesto que el resto es un input pero ese elemento puede ser el que quieras.

function mostrarReferencia(){
//Si la opcion con id Conocido_1 (dentro del documento > formulario con name fcontacto >     y a la vez dentro del array de Conocido) esta activada
if (document.getElementById('tamanio').value != "") {
    //muestra (cambiando la propiedad display del estilo) el div con id 'desdeotro'
    document.getElementById('resto').style.display='block';
    //por el contrario, si no esta seleccionada
} else {
    //oculta el div con id 'desdeotro'
    document.getElementById('resto').style.display='none';
}
}
<select class="form-control form-control-lg" name="tamanio" id="tamanio" onchange="mostrarReferencia()" required>
    <option value="">Elige opción</option>
    <option value="30">30</option>
    <option value="45">45</option>
    <option value="75">75</option>
    <option value="100">100</option>
    <option value="125">125</option>
    <option value="150">150</option>
</select>
<br><br>
<input type="text" id="resto" value="Se muestra" hidden/>

0

Intenta esto:

function mostrarReferencia(elemento){

  const tamanio = document.getElementById('tamanio');
  const resto = document.getElementById('resto');
  
  if (elemento.value != "") { 
    resto.style.display='block'; 
  } else {
    resto.style.display='none';
  }

}
#resto{
border:1px solid red;
height:100px;
margin-top:50px;
}
<select class="form-control form-control-lg" name="tamanio" id="tamanio" required onChange="mostrarReferencia(this)">
    <option value="">Elige opción</option>
    <option value="30">30</option>
    <option value="45">45</option>
    <option value="75">75</option>
    <option value="100">100</option>
    <option value="125">125</option>
    <option value="150">150</option>
</select>

<div id="resto">DIV RESTO</div>

2
  • mil gracias ya lo he conseguido, me faltaba: onChange="mostrarReferencia() en el select para llamar a la función un saludo y mil gracias
    – pablo
    Commented el 20 sept. 2018 a las 10:42
  • Perfecto, puedes colocar mi respuesta como valida por favor? gracias Commented el 20 sept. 2018 a las 11:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.