Foros del Web » Programando para Internet » Javascript »

Mostrar y ocultar campo de acuerdo a valor.

 Estas en el tema de Mostrar y ocultar campo de acuerdo a valor. en el foro de Javascript en Foros del Web. Hola, tengo la siguiente tabla que genera la información consultándola desde una base de datos, lo que quisiera saber como puedo hacer que dependiendo a ...
  #1 (permalink)  
Antiguo 13/01/2016, 12:26
 
Fecha de Ingreso: octubre-2013
Mensajes: 79
Antigüedad: 11 años, 3 meses
Puntos: 0
Pregunta Mostrar y ocultar campo de acuerdo a valor.
Hola, tengo la siguiente tabla que genera la información consultándola desde una base de datos, lo que quisiera saber como puedo hacer que dependiendo a la opción que seleccionen en la columna estatus, aparezca o desaparezca la columna "Programada" o "Comentario".


Ejemplo:

Selecciono la opción "Aprobado Area" de la columna "Estado" quiero que solo aparezca el campo "fecha"de la columna "Programada" y ocultar el campo "Comentario" de la columna "Comentarios" pero solo en la fila que le asigne "Aprobado Área".





Espero que me puedan ayudar.

Agradecimiento anticipado.
  #2 (permalink)  
Antiguo 13/01/2016, 13:49
 
Fecha de Ingreso: diciembre-2015
Mensajes: 45
Antigüedad: 9 años, 2 meses
Puntos: 3
Respuesta: Mostrar y ocultar campo de acuerdo a valor.
Es sencillo con JQuery te explico como hacerlo:

Para utilizar el JQuery puedes llamar por link así:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

O descargarlo y llamarlo así:
<script type="text/javascript" src="tuRuta/jquery-ui-1.8.2.custom.min.js">

con los sytles display block lo muestras y con display none lo ocultas también puede servir visibility con visible o hidden

Desde Jquery los cambias los estilos de esta manera

$("#tuId").css("display", "block");

Para ejecutar el codigo puedes llamarlo al seleccionar un valor en tu select:

Llamas tu codigo desde la Javascript
$("#tuIdCampo").change(function () {

Llamas tu función desde el combobox
<select id="mySelect2" onchange="tuFuncion(tusParametros)">

Para cambiar los valores de un input text:
$( "#TuId" ).val( "Tu texto" );

Para seleccionar los valores de un select:
$('#tuId > option[value="tuValor"]').attr('selected', 'selected');

Con esto verificar de forma segura si el documento esta listo.
$(document).ready(function(){
});

Y con .load verificas que toda tu página este lista.

Como sugerencia busca una chuleta con los eventos de JQuery, esto es lo que necesitas para conseguirlo suerte!!
  #3 (permalink)  
Antiguo 13/01/2016, 14:22
 
Fecha de Ingreso: octubre-2013
Mensajes: 79
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Mostrar y ocultar campo de acuerdo a valor.
Con el codigo que mencionas va generando los ids para cada fila? es decir si se consulta 15 campos select te genera id[1], id[2]... etc.

?
  #4 (permalink)  
Antiguo 13/01/2016, 17:53
 
Fecha de Ingreso: diciembre-2015
Mensajes: 45
Antigüedad: 9 años, 2 meses
Puntos: 3
Respuesta: Mostrar y ocultar campo de acuerdo a valor.
});
});
})
});


$(document).ready(function(){
$("#lst-marcas").change(function () {
$("#lst-marcas option:selected").each(function () {
marca=$(this).val();
alert("marca");
$.post("autocompletar.php", { marca: marca }, function(data){
$("#formularios").html(data);
});
});
})
});

</script>


<html>
<body>
<select name='categoria' class='select' id='status'>
<option value='0'selected>=Selecciona una categoría=</option>
<option class='selbloq' disabled='disabled'>-Abarrotes-</option>
<option value='abarrotes cat1'>abarrotes cat1</option>
<option value='abarrotes cat2'>abarrotes cat2</option>
<option class='selbloq' disabled='disabled'>-Herramientas-</option>
<option value='herramientas cat1'>herramientas cat1</option>
<option value='herramientas cat2'>herramientas cat2</option>
<option class='selbloq' disabled='disabled'>-autos/transportes-</option>
<option value='auto1'>autos</option>
<option value='auto2'>motos</option>
<option value='auto3'>cuatriciclos</option>
</select>

<select style="display:none" name="marca" class="select" id="lst-marcas">
<option value="0">=Selecciona una marca=</option>
<option value="marca1">marca1</option>
<option value="marca2">marca2</option>
<option value="marca3">marca3</option>
<option value="marca4">marca4</option>
<option value="marca5">marca5</option>
<option value="marca6">marca6</option>
<option value="marca7">marca7</option>
<option value="marca8">marca8</option>
</select>

<br>
<br>
<div id='formularios'></div>


En este blog puedes encontrar información más detallada acerca de ocultar y mostrar elementos: http://www.anerbarrena.com/jquery-show-hide-ocultar-divs-ids-2360/

Saludos!!
  #5 (permalink)  
Antiguo 13/01/2016, 18:04
 
Fecha de Ingreso: diciembre-2015
Mensajes: 45
Antigüedad: 9 años, 2 meses
Puntos: 3
Respuesta: Mostrar y ocultar campo de acuerdo a valor.
Comento de nuevo porque el captcha no me deja editar.

Con el código que mencionas va generando los ids para cada fila?

No en el código que te explico viene como llamar una función, como ocultar y mostrar elementos, como usar JQuery, como llenar un input text y cambiar un select, todo esto sin necesidad de recargar.

es decir si se consulta 15 campos select te genera id[1], id[2]... etc.?

No el codigo que te coloque es para ocultar y mostrar elementos pero de igual forma los puedes crear y destruir con JQuery, pero en tu caso basta con mostrar y ocultar.

El select ya lo vas a tener creado con todos sus elementos solo lo vas a mostrar y ocultar.
Para no tener que ocultar y mostrar cada uno de tus elementos lo colocas dentro de una etiqueta div con un id, y es el que ocultaras o mostraras según tus condiciones.
Otra cosa por ende los campos que quieras que aparezcan despues los vas a tener por default con el estilo display:none para que no se vean.

El select lo puedes crear así:

<select style="display:none" name="marca" class="select" id="lst-marcas">
<option value="0">=Selecciona una marca=</option>
<option value="marca1">marca1</option>
<option value="marca2">marca2</option>
<option value="marca3">marca3</option>
<option value="marca4">marca4</option>
<option value="marca5">marca5</option>
<option value="marca6">marca6</option>
<option value="marca7">marca7</option>
<option value="marca8">marca8</option>
</select>

O así en este caso:

<select id="midiv">
<script>
var i=0
for (i=0;i<=10;i++){
document.write("<option id='"+i+"'>opcion" + i)
}
</script>

Aquí lo hice con Javascript igual lo puedes hacer con php solo cambias document.write por echo y lo concatenas, abres y cierras en su respectiva forma.

Te dejo un ejemplo de como ocultar y mostrar, disculpa por reutilizarlo pero no me da tiempo hoy de hacerte un ejemplo. Este codigo te arroja otro combobox
al seleccionar una opcion del primer combobox.

<script type="text/javascript" src="jquery.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$("#status").change(function () {
$("#status option:selected").each(function () {
seleccion=$(this).val();
alert(seleccion);
if (seleccion=="auto1") {
$("#lst-marcas").css("display", "block");
}
else{
$("#lst-marcas").css("display", "none");
}
$.post("autocompletar.php", { seleccion: seleccion }, function(data){
$("#formularios").html(data);
});
});
})
});


$(document).ready(function(){
$("#lst-marcas").change(function () {
$("#lst-marcas option:selected").each(function () {
marca=$(this).val();
alert("marca");
$.post("autocompletar.php", { marca: marca }, function(data){
$("#formularios").html(data);
});
});
})
});

</script>


<html>
<body>
<select name='categoria' class='select' id='status'>
<option value='0'selected>=Selecciona una categoría=</option>
<option class='selbloq' disabled='disabled'>-Abarrotes-</option>
<option value='abarrotes cat1'>abarrotes cat1</option>
<option value='abarrotes cat2'>abarrotes cat2</option>
<option class='selbloq' disabled='disabled'>-Herramientas-</option>
<option value='herramientas cat1'>herramientas cat1</option>
<option value='herramientas cat2'>herramientas cat2</option>
<option class='selbloq' disabled='disabled'>-autos/transportes-</option>
<option value='auto1'>autos</option>
<option value='auto2'>motos</option>
<option value='auto3'>cuatriciclos</option>
</select>

<select style="display:none" name="marca" class="select" id="lst-marcas">
<option value="0">=Selecciona una marca=</option>
<option value="marca1">marca1</option>
<option value="marca2">marca2</option>
<option value="marca3">marca3</option>
<option value="marca4">marca4</option>
<option value="marca5">marca5</option>
<option value="marca6">marca6</option>
<option value="marca7">marca7</option>
<option value="marca8">marca8</option>
</select>

<br>
<br>
<div id='formularios'></div>


En este blog puedes encontrar información más detallada acerca de ocultar y mostrar elementos: http://www.anerbarrena.com/jquery-show-hide-ocultar-divs-ids-2360/

Es horrible el captcha de esta pagina, Saludos!!


Con el código que mencionas va generando los ids para cada fila?

No en el código que te explico viene como llamar una función, como ocultar y mostrar elementos, como usar JQuery, como llenar un input text y cambiar un select, todo esto sin necesidad de recargar.

es decir si se consulta 15 campos select te genera id[1], id[2]... etc.?

No el codigo que te coloque es para ocultar y mostrar elementos pero de igual forma los puedes crear y destruir con JQuery, pero en tu caso basta con mostrar y ocultar.

El select ya lo vas a tener creado con todos sus elementos solo lo vas a mostrar y ocultar.
Para no tener que ocultar y mostrar cada uno de tus elementos lo colocas dentro de una etiqueta div con un id, y es el que ocultaras o mostraras según tus condiciones.
Otra cosa por ende los campos que quieras que aparezcan despues los vas a tener por default con el estilo display:none para que no se vean.

El select lo puedes crear así:

<select style="display:none" name="marca" class="select" id="lst-marcas">
<option value="0">=Selecciona una marca=</option>
<option value="marca1">marca1</option>
<option value="marca2">marca2</option>
<option value="marca3">marca3</option>
<option value="marca4">marca4</option>
<option value="marca5">marca5</option>
<option value="marca6">marca6</option>
<option value="marca7">marca7</option>
<option value="marca8">marca8</option>
</select>

O así en este caso:

<select id="midiv">
<script>
var i=0
for (i=0;i<=10;i++){
document.write("<option id='"+i+"'>opcion" + i)
}
</script>

Aquí lo hice con Javascript igual lo puedes hacer con php solo cambias document.write por echo y lo concatenas, abres y cierras en su respectiva forma.

Te dejo un ejemplo de como ocultar y mostrar, disculpa por reutilizarlo pero no me da tiempo hoy de hacerte un ejemplo. Este codigo te arroja otro combobox
al seleccionar una opcion del primer combobox.

<script type="text/javascript" src="jquery.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$("#status").change(function () {
$("#status option:selected").each(function () {
seleccion=$(this).val();
alert(seleccion);
if (seleccion=="auto1") {
$("#lst-marcas").css("display", "block");
}
else{
$("#lst-marcas").css("display", "none");
}
$.post("autocompletar.php", { seleccion: seleccion }, function(data){
$("#formularios").html(data);
});
});
})
});


$(document).ready(function(){
$("#lst-marcas").change(function () {
$("#lst-marcas option:selected").each(function () {
marca=$(this).val();
alert("marca");
$.post("autocompletar.php", { marca: marca }, function(data){
$("#formularios").html(data);
});
});
})
});

</script>


<html>
<body>
<select name='categoria' class='select' id='status'>
<option value='0'selected>=Selecciona una categoría=</option>
<option class='selbloq' disabled='disabled'>-Abarrotes-</option>
<option value='abarrotes cat1'>abarrotes cat1</option>
<option value='abarrotes cat2'>abarrotes cat2</option>
<option class='selbloq' disabled='disabled'>-Herramientas-</option>
<option value='herramientas cat1'>herramientas cat1</option>
<option value='herramientas cat2'>herramientas cat2</option>
<option class='selbloq' disabled='disabled'>-autos/transportes-</option>
<option value='auto1'>autos</option>
<option value='auto2'>motos</option>
<option value='auto3'>cuatriciclos</option>
</select>

<select style="display:none" name="marca" class="select" id="lst-marcas">
<option value="0">=Selecciona una marca=</option>
<option value="marca1">marca1</option>
<option value="marca2">marca2</option>
<option value="marca3">marca3</option>
<option value="marca4">marca4</option>
<option value="marca5">marca5</option>
<option value="marca6">marca6</option>
<option value="marca7">marca7</option>
<option value="marca8">marca8</option>
</select>

<br>
<br>
<div id='formularios'></div>


En este blog puedes encontrar información más detallada acerca de ocultar y mostrar elementos: http://www.anerbarrena.com/jquery-show-hide-ocultar-divs-ids-2360/

El captcha esta horrible Saludos!!
  #6 (permalink)  
Antiguo 14/01/2016, 06:14
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 7 meses
Puntos: 1012
Respuesta: Mostrar y ocultar campo de acuerdo a valor.
a cada combox le asignas el evento onchage e invocas a una función. esta función, al trabajar con una tabla, podría ser algo como esto
Cita:
this.parentNode.parentNode.childNodes[2].firstChild.style.display = ' none';
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: cada, dinamicos, fila
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:42.