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, digamos rojo, azul, otros. Si un usuario selecciona una opción como otros, debajo de un cuadro de texto debería estar visible para escribir su propio color favorito. Puedo llenar el cuadro desplegable con colores, pero no sé cómo hacer que el cuadro de texto sea visible en la selección de otros en el cuadro desplegable. Sé que es posible usar javascript, pero soy bastante nuevo en javascript. ¿alguien puede ayudarme?

Esta es la opción de selección que estoy implementando 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

preguntado el 09 de marzo de 12 a las 13:03

6 Respuestas

A continuación se muestra el código JavaScript principal que debe 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>

Respondido el 27 de Septiembre de 17 a las 15:09

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 formulario 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. - shashi-roy

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

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

@JohnHiggins Lo resolví sobrescribiendo el contenido del campo de texto con el valor de selección. Es solo una línea más en Javascript debajo de Else. - Sprachprofi

Codificó un ejemplo en 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'; 
}

respondido 09 mar '12, 13:03

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 (dale a la selección una 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');
      }
    }
  }
}

Respondido el 31 de diciembre de 15 a las 12:12

Como respuesta de Umesh Patil, tiene un comentario que dice que hay un problema. Intento editar la respuesta y me rechazan. Y obtenga sugerencias para publicar 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>

Respondido 18 ago 17, 07:08

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' />

editar: requiere el complemento JQuery

respondido 09 mar '12, 13:03

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

Deberías haberlo mencionado en la respuesta. El OP podría probar esta respuesta y terminar obteniendo muchos errores: P - lobo

Esto enviará la respuesta de formulario correcta (es decir, seleccione el valor la mayor parte del tiempo y el valor de entrada cuando el cuadro de selección esté establecido en "otros"). Utiliza jQuery:

  $("select[name="color"]").change(function(){
    new_value = $(this).val();
    if (new_value == "others") {
      $('input[name="color"]').show();      
    } else {
      $('input[name="color"]').val(new_value);
      $('input[name="color"]').hide();
    }
  });

Respondido 10 Feb 20, 20:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.