mostrar/ocultar cuadro de texto basado en la lista desplegable

Por ejemplo, tengo un código:

<form name="myform">
<table>
<td>
<select name="one" onchange="if (this.selectedIndex=='other'){this.myform['other'].style.visibility='visible'}else {this.myform['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>

Necesito que aparezca el cuadro de texto cuando se selecciona la opción "otro". El código anterior no funciona :(

preguntado el 28 de agosto de 12 a las 12:08

8 Respuestas

selectedIndex da un índice, es decir, un número, por lo que el índice para "otro" es 8, puede obtener el valor de la opción seleccionada de la propiedad de valor del elemento seleccionado. Para acceder al formulario, un control está en uso, la propiedad de formulario de elementos this.form, también las celdas de su tabla deben estar en una fila.

<form name="myform">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='other'){this.form['other'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>

Respondido 28 ago 12, 14:08

si agrega otro artículo mañana, el selectedIndex no será 8 - codificación

@codingbiz, ¿qué pasaría si agregara uno hoy? - Musa

Gracias por la solución @Musa. Me preguntaba si hay una manera de manejar el siguiente problema. El cuadro de texto "otro" está oculto hasta que seleccione el valor, pero aún ocupa espacio, por lo que el diseño se ve raro, porque solo ve un espacio vacío. ¿Hay una manera de resolver esto? - kat_indo

@kat_indo puede usar la propiedad de visualización en lugar de la visibilidad. - Musa

¡Gracias por volver a este @Musa! Después de todo, pude resolverlo investigando un poco más. - kat_indo 

    <form name="myform">
       <table>
         <td>
           <select name="one" onchange="if (this.options[this.selectedIndex].value =='other'){document.myform['other'].style.visibility='visible'}else {document.myform['other'].style.visibility='hidden'};">
             <option value="" selected="selected">Select...</option>
             <option value="1">1</option>
             <option value="2">3</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="other">Other</option>
          </select>
         <input type="textbox" name="other" style="visibility:hidden;"/>
       </td>
    </table>
 </form>​

Respondido 28 ago 12, 13:08

<form name="myform">
<table>
<td>
<select name="one" id="mySelect">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>

<script type="text/javascript">
$('#mySelect').bind('onchange',function(){
if (this.value==='other')
{
this.myform['other'].style.visibility='visible'
}
else {
this.myform['other'].style.visibility='hidden'};
}
</script>

Respondido 28 ago 12, 13:08

Tu respuesta es incorrecta, pero no votaré negativamente. Estoy seguro de que alguien lo hará. this.selectedIndex=='other' Está Mal - codificación 

$(document).ready(function () {
        $('#types').change(function () {
            if ($('#types').val() == 'Other') {
                $('#other').show();
            }
            else {
                $('#other').hide();
            }
        });
    });



<body>
<form id="form1" runat="server">
    <div>

   <select id="types" name="types">
            <option value="Type 1">Type 1</option>
            <option value="Type 2">Type 2</option>
            <option value="Type 3">Type 3</option>
            <option value="Other">Other</option>
        </select>

        <input type="text" id="other" name="other" style="display: none;" />
    </div>
</form>

Respondido 13 Abr '16, 08:04

En primer lugar, adjunte su td en un parche de tr y luego debajo está la DEMO

http://jsfiddle.net/3Snmh/5/

Respondido 28 ago 12, 13:08

this.selectedIndex devuelve un entero, no una cadena. Algo así como 0,1,2 y probablemente 8 para 'otros'. 8 == 'other' nunca puede ser verdad

prueba este

onchange="if (this.options[this.selectedIndex].value =='other')"

Respondido 28 ago 12, 13:08

<form name="form" action="" method="post">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='yes'){this.form['yes'].style.visibility='visible'}else {this.form['yes'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<input type="text" name="yes" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>

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

seleccionado un valor, da un valor de sí o no. Para seleccionar el valor, puede obtener el valor de la opción seleccionada de la propiedad de valor del elemento seleccionado. el valor seleccionado es "sí", ese campo de texto oculto de tiempo se mostrará. El valor es "no", el texto archivado está oculto - sukanya suku

JQuery

$(document).ready(function() {
        $("select").change(function() {
            $(this).find("option:selected").each(function() {
                if ($(this).attr("value") == "class") {
                    $(".box").not(".class_name").hide();
                    $(".class_name").show();
                    $(".box").not(".class_name").val("");
                } 

                else if ($(this).attr("value") == "ref") {
                    $(".box").not(".ref_id").hide();
                    $(".ref_id").show();
                    $(".box").not(".ref_id").val("");
                }

                else {
                    $(".box").hide();
                }
            });
        }).change();
    });

HTML

<div>
            <select>
                <option>Choose</option>
                <option value="class">Class</option>
                <option value="ref">Particular</option>
            </select>
        </div>
        <div class="class_name box">
            Class Name: <input type="text" name="c">
        </div>
        <div class="ref_id box">
            Reference_id : <input type="text" name="r">
        </div>

Respondido 18 ago 16, 10:08

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