[SOLUCIONADO] Adaptación de código (Radio a Select)

[SonrisaCs]

Buenos días, tengo el siguiente problema, no consigo adaptar este código

Código Javascript:

<script type="text/javascript">
<!--
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.fcontacto.Conocido[1].checked == true) {
//muestra (cambiando la propiedad display del estilo) el div con id 'desdeotro'
document.getElementById('desdeotro').style.display='block';
//por el contrario, si no esta seleccionada
} else {
//oculta el div con id 'desdeotro'
document.getElementById('desdeotro').style.display='none';
}
}
-->
</script>
 

Código HTML:

//se le asigna un name al formulario de contacto.
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="fcontacto">
//inputs
 
<p>A través de donde nos has conocido:<br />
//importante llamar a la función
<input type="radio" name="Conocido" value="Google" id="Conocido_0" onclick="mostrarReferencia();" /> Google
<input type="radio" name="Conocido" value="Otros" id="Conocido_1" onclick="mostrarReferencia();" /> Otros
</p>
 
//div oculto
<div id="desdeotro" style="display:none;">
<p>Referencia de la oferta:</p>
<p><input type="text" name="otro" class="input" /></p>
</div>
 

a un Select.

Lo que hace el código es hacer aparecer o desaparecer un campo input según la opción que se tilde, y yo quería que haga lo mismo pero según el "Option" del select que se eligiera, pero probé infinidad de cosas y ninguna me dio resultado, intenté cambiar el ".cheked" por ".selected", y muchas cosas más, pero no sé bien cómo funciona Javascript, si pudieran darme una mano, se los agradecería muchísimo

Gracias y saludos!

[bathorz]

Variante con addEventListener:

Código Javascript:

window.onload = function() {
        var nodo = document.getElementsByName('Conocido');
 
        nodo[0].addEventListener('click', mostrarReferencia);
        nodo[1].addEventListener('click', mostrarReferencia);
 
        function mostrarReferencia() {
          if (nodo[0].checked === true) {
            document.getElementById('desdeotro').style.display = 'block';
          } else {
            document.getElementById('desdeotro').style.display = 'none';
          }
        }
 
      };
 

Código HTML:

<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="fcontacto">
      <p>A través de donde nos has conocido:<br />
        <input type="radio" name="Conocido" value="Google" id="Conocido_0" /> Google
        <input type="radio" name="Conocido" value="Otros" id="Conocido_1" /> Otros
      </p>
      <input type="button" id="boton" value="boton" />
    </form>
    <div id="desdeotro" style="display:none;">
      <p>Referencia de la oferta:</p>
      <p><input type="text" name="otro" class="input" /></p>
    </div>
 

[Alexis88]

¿Buscas hacer algo como esto?



Si es así, lo único que debes hacer es recorrer el conjunto de elementos <input> que deseas afectar según la selección en el elemento <select>. En el ejemplo, si la última parte del id del <input> es igual al valor seleccionado en el <select> o si se seleccionó la opción "Todos", se muestra el <input> coincidente o todos si se eligió la última opción. Para iterar sobre el conjunto de elementos <input>, utilizo la estructura Array.prototype.forEach.

Saludos

[SonrisaCs]

Iniciado por bathorz

Variante con addEventListener:

Código Javascript:

window.onload = function() {
        var nodo = document.getElementsByName('Conocido');
 
        nodo[0].addEventListener('click', mostrarReferencia);
        nodo[1].addEventListener('click', mostrarReferencia);
 
        function mostrarReferencia() {
          if (nodo[0].checked === true) {
            document.getElementById('desdeotro').style.display = 'block';
          } else {
            document.getElementById('desdeotro').style.display = 'none';
          }
        }
 
      };
 

Código HTML:

<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="fcontacto">
      <p>A través de donde nos has conocido:<br />
        <input type="radio" name="Conocido" value="Google" id="Conocido_0" /> Google
        <input type="radio" name="Conocido" value="Otros" id="Conocido_1" /> Otros
      </p>
      <input type="button" id="boton" value="boton" />
    </form>
    <div id="desdeotro" style="display:none;">
      <p>Referencia de la oferta:</p>
      <p><input type="text" name="otro" class="input" /></p>
    </div>
 

Hola! Gracias por responder! Aunque el código que estoy buscando es para implementarlo a un select, si bien esto es una variación aún así no se me ocurre ninguna manera de adaptarlo

Iniciado por Alexis88

¿Buscas hacer algo como esto?



Si es así, lo único que debes hacer es recorrer el conjunto de elementos <input> que deseas afectar según la selección en el elemento <select>. En el ejemplo, si la última parte del id del <input> es igual al valor seleccionado en el <select> o si se seleccionó la opción "Todos", se muestra el <input> coincidente o todos si se eligió la última opción. Para iterar sobre el conjunto de elementos <input>, utilizo la estructura Array.prototype.forEach.

Saludos

¡Genial! Era eso, muchísimas gracias :) Doy el tema por solucionado