Jquery hide show input object

Question

Tengo este código en jsfiddle. Todo lo que trato de hacer es ocultar/mostrar un determinado objeto de entrada si se selecciona un valor de selección.

CODE ON JSFIDDLE

la parte HTML del código está aquí:

<label for="add_fields_placeholder">Placeholder: </label> 
<select name="add_fields_placeholder" id="add_fields_placeholder"> 
    <option value="50">50</option> 
    <option value="100">100</option> 
    <option value="Other">Other</option> 
</select> 
<div id="add_fields_placeholderValue"> 
    Price: 
    <input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue"> 
</div>​ 

Y la parte jQuery está aquí:

$(document).ready(function() 
{ 
    $("#add_fields_placeholder").change(function() { 
     if($(this).val() == "Other") { 
      $("#add_fields_placeholderValue").show(); 
     } 
     else { 
      $("#add_fields_placeholderValue").hide(); 
     } 
    }); 
}); 

lo tanto, si el usuario selecciona "Otros", se muestra otro objeto de entrada.

El problema ahora es esto. Primero, cuando abre la página, la primera opción se selecciona de forma predeterminada y se muestra el objeto de entrada opcional. Se oculta una vez que seleccionas otra opción.

¿Hay algún truco para ocultarlo cuando primero carga la página también? No solo cuando selecciona un valor manualmente.

Gracias chicos.

Answer 1

Sólo añadir:

$("#add_fields_placeholderValue").hide(); 

Después de su cambio de declaración evento al cargar la página.

decir

$(document).ready(function() 
{ 
$("#add_fields_placeholder").change(function() 
{ 
    if($(this).val() == "Other") 
    { 
    $("#add_fields_placeholderValue").show(); 
    } 
    else 
    { 
    $("#add_fields_placeholderValue").hide(); 
    } 
}); 
$("#add_fields_placeholderValue").hide(); 
}); 

Ejemplo de trabajo: http://jsfiddle.net/bZXYR/

Answer 2

Me suelen factorizar el ocultar/mostrar la lógica:

function foobar(){ 
    if($(this).val() == "Other"){ 
     $("#add_fields_placeholderValue").show(); 
    } 
    else{ 
     $("#add_fields_placeholderValue").hide(); 
    } 
} 

y llaman al cargarse la página.

$(document).ready(function(){ 
    foobar(); 
    $("#add_fields_placeholder").change(function(){ 
     foobar(); 
    }); 
}); 

pero me gustaría saber qué hacen normalmente otras personas.

Answer 3

Puede usar CSS para ocultar inicialmente

#add_fields_placeholderValue{display:none;} 

http://jsfiddle.net/FarVX/20/

también tiene varios elementos con el mismo ID (señalado por Brandon), que no es válida

Answer 4

Usted podría simplemente hazlo con CSS:

Cambia la ID aquí:

<input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue"> 

puesto que ya lo utiliza aquí

<div id="add_fields_placeholderValue"> 

y luego agrega esta css:

#add_fields_placeholderValue { 
    display: none;  
}​ 

Answer 5

si cambia el método anónimo en una función exigible, debe ser capaz de llamar en Listo()

por ejemplo

$(document).ready(function() { 
    $("#add_fields_placeholder").change(ShowIfOther); 
    ShowIfOther(); 
}); 

function ShowIfOther() { 
    if ($("#add_fields_placeholder").val() == "Other") { 
     $("#add_fields_placeholderValue").show(); 
    } else { 
     $("#add_fields_placeholderValue").hide(); 
    } 
}​ 

Answer 6

Coloque el código siguiente debajo de los elementos de marcador de posición:

<script>$('#add_fields_placeholderValue').hide();</script> 

Hacerlo en el manejador de listas puede inducir 'intermitente' del elemento en ciertas circunstancias:

Twinkling when call hide() on document ready