cómo activar un cuadro de texto si selecciono otra opción en el cuadro desplegable

supongamos que tengo 3 opciones en un cuadro desplegable que dicen rojo, azul, otros. Si un usuario selecciona una opción como otras, debajo de un cuadro de texto debería estar visible para ver su propio color favorito. Puedo rellenar el cuadro desplegable con colores pero no sé cómo mostrar el cuadro de texto en la selección de otros en el cuadro desplegable . Sé que usar JavaScript es posible, pero soy bastante nuevo en javascript. ¿Alguien puede ayudarme ?cómo activar un cuadro de texto si selecciono otra opción en el cuadro desplegable

Ésta es la opción Seleccionar me estoy poniendo en práctica en mi formulario HTML

<select name="color"> // color 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 

<input type="text" name="color" id="color" /></td> // this textbox should be hidden //until unless others is selected in the drop down box

Fuente

2012-03-09 Shashi Roy

Abajo es el núcleo de JavaScript que necesita para escribir:

<html> 
<head> 
<script type="text/javascript"> 
function CheckColors(val){ 
var element=document.getElementById('color'); 
if(val=='pick a color'||val=='others') 
    element.style.display='block'; 
else 
    element.style.display='none'; 
} 

</script> 
</head> 
<body> 
    <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
    </select> 
<input type="text" name="color" id="color" style='display:none;'/> 
</body> 
</html>

Fuente

2012-03-09 13:38:36

está bien ... ahora puedo entender un error en mi pregunta. No quiero procesar un campo en blanco. Aquí, en este caso, el cuadro de texto es simplemente invisible. Quiero que sea invisible y activo en mi forma solo en caso de que seleccione otros. No quiero procesar un campo en blanco porque mostrará un error al insertar vale en la base de datos. –

Perdón por robar en @Umesh ... No puedo hacer que esto funcione porque el ingreso de texto niega las opciones de selección por algún motivo. ¿AYUDA? Quiero decir, el javascript funciona y todo, pero no va a PUBLICAR los valores del menú desplegable ... solo el ingreso de texto – gavin

@gavin ¿Alguna vez resolvió el problema de la entrada de texto sobrescribiendo la selección ya que tengo el mismo problema ? –

en línea:

<select 
onchange="var val = this.options[this.selectedIndex].value; 
this.form.color[1].style.display=(val=='others')?'block':'none'">

Solía hacer esto

En la cabeza (dar al seleccionar un ID):

window.onload=function() { 
    var sel = document.getElementById('color'); 
    sel.onchange=function() { 
    var val = this.options[this.selectedIndex].value; 
    if (val == 'others') { 
     var newOption = prompt('Your own color',''); 
     if (newOption) { 
     this.options[this.options.length-1].text = newOption; 
     this.options[this.options.length-1].value = newOption; 
     this.options[this.options.length] = new Option('other','other'); 
     } 
    } 
    } 
}

Fuente

2012-03-09 13:30:15 mplungjan

codificado en un ejemplo http://jsbin.com/orisuv

HTML

<select name="color" onchange='checkvalue(this.value)'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 
<input type="text" name="color" id="color" style='display:none'/>

Javascript

function checkvalue(val) 
{ 
    if(val==="others") 
     document.getElementById('color').style.display='block'; 
    else 
     document.getElementById('color').style.display='none'; 
}

Fuente

2012-03-09 13:30:55

Simplemente

<select id = 'color2' 
     name = 'color' 
     onchange = "if ($('#color2').val() == 'others') { 
         $('#color').show(); 
        } else { 
         $('#color').hide(); 
        }"> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 

<input type = 'text' 
     name = 'color' 
     id = 'color' />

edición: requiere plugin de jQuery

Fuente

2012-03-09 13:32:14 CKKiller

¿Por qué usar jQuery para algunos triviales trabajos de JavaScript? –

más corto y más ordenado, es solo lo que uso, siempre tengo adjunto jquery de todos modos – CKKiller

Deberías haber mencionado eso en la respuesta. El OP podría intentar esta respuesta y terminar recibiendo muchos errores: P –

Como respuesta Umesh Patil tiene comentarios dicen que no hay problema. Intento editar la respuesta y obtener el rechazo. Y sugiérale que publique una nueva respuesta. Este código debería resolver el problema que tienen (Shashi Roy, Gaven, John Higgins).

<html> 
<head> 
<script type="text/javascript"> 
function CheckColors(val){ 
var element=document.getElementById('othercolor'); 
if(val=='others') 
    element.style.display='block'; 
else 
    element.style.display='none'; 
} 

</script> 
</head> 
<body> 
    <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
    </select> 
<input type="text" name="othercolor" id="othercolor" style='display:none;'/> 
</body> 
</html>

Fuente

2017-08-18 06:44:06 gongsun

cómo activar un cuadro de texto si selecciono otra opción en el cuadro desplegable

Respuesta

Cuestiones relacionadas