Como hacer esto

Bertitha · #1 (**permalink**) 11/11/2009, 00:46

Hola amigos del foro,me he visto en la necesidad de lo siguiente tengo un combobox y quiero que dependiendo de la opcion seleccionada me aparezca un combobox alguien podria explicarme si es posible?

Por ejemplo si selecciono la opcion 1 que me muestre otro combobox con opcion 3 y 4 y si eligo opcion 2 que me muestre otro con opcion 5 y 6

iovan · #2 (**permalink**) 11/11/2009, 01:55

¿Deseas que al seleccionar un combobox aparescan otros combobox y al deseleccionarlo estos desaparezcan?

Amiga te vas a tener que ayudar de onselect y de javascript =(

Consulta esto en el foro de ajax o javascript y si te sirve de ayuda te comento como lo puedes hacer.

desarrollas un js mas o menos asi, claro este es para que te des una idea:

Código html:

Ver original<head>
<script language="javascript">
function showComboBox(cb){
var hiddencb = document.getElementById(cb);
hiddencb.style.display = (hiddencb.style.display == "none") ? "block" : "none";
}
</script>
</head>
 
<body>
<label>
<input type="checkbox" onmouseover="showComboBox('Combo1')"/> Hacer aparecer otros combobox
</label>
<div id="Combo1" style="display:none;">
<input type="checkbox" /> otro combo box
</div>

Pero en la vida real vas a tener que hacer uso de una accion llamada "onSelect" para llamar a la funcion y motrar un div donde puedes contener todos los combobox que deseas ocultar y asi sucesivamente.

Saludos!

Bertitha · #3 (**permalink**) 11/11/2009, 02:03

Gracias New claro que me sirve es parecido a lo que necesito y si que lleva algo de javascript mira he encontrado un tema parecido a lo que necesito asi que aqui muestro el enlace http://www.forosdelweb.com/f13/crear...namico-568990/ pero me he encontrado con que no funcionan los bloques bueno no oculta el 2 ni el 3 y no encuentro el error,podrias auxiliarme en esa parte,gracias.....

iovan · #4 (**permalink**) 11/11/2009, 02:08

Si amiga no te preocupes!

Aqui tienes este, creo que esto si te puede servir

Código html:

Ver original<input type="checkbox" onclick="document.getElementById('Combo1').style. display = (this.checked) ? 'block' : 'none' " /><br>
 
<div id="Combo1" style="display: none" >
<input type="checkbox" />Otro checkbox<br>
<input type="checkbox" />Otro mas...<br>
<label><input type="checkbox" onclick="document.getElementById('Combo2').style. display = (this.checked) ? 'block' : 'none' " /> y con este muestras otros combobox, intentalo da click!</label><br>
 
<div id="Combo2" style="display: none">
<input type="checkbox" /> Lo ves, otros combobox!<br>
<input type="checkbox" /> =)
</div>
 
</div>

Si, esto es definitivamente lo que quieres, no necesitas definir un script en la cabecera de pagina, solo has esto y listo!

Saludos!

Bertitha · #5 (**permalink**) 11/11/2009, 02:16

Gracias NEW permiteme probarlo y luego lo ajusto ami codigo,gracias

Bertitha · #6 (**permalink**) 11/11/2009, 02:21

New lo he probado y funciona bien es justo lo que deseo pero como le hago para si en ves de checkbox quiero un combobox o lista/menu?? podrias decirme

iovan · #7 (**permalink**) 11/11/2009, 03:08

oh! ya.

Tu querias con listaMenu, yo crei que hablabas de checkbox, sorry.

bien, lo logras de la misma manera pero debes usar this.selected en lugar de this.checked pero te soy sincero, usar esta opcion no es nada buena ya que no hay forma de deshabilitar las capas que muestras, una vez muestras capas estas no las puedes quitar.

Código html:

Ver original<select>
    <option onclick="document.getElementById('ComboBox').style. display = (this.selected) ? 'block' : 'none' ">Motrar opciones</option>
  </select>
<div id="ComboBox" style="display:none">
  <select>
    <option onclick="document.getElementById('Combo1').style. display = (this.selected) ? 'block' : 'none' ">Combo1</option>
    <option onclick="document.getElementById('Combo2').style. display = (this.selected) ? 'block' : 'none' ">Combo2</option>
  </select>
 
   <div id="Combo1" style="display:none">Contenido combo 1</div>
   <div id="Combo2" style="display:none">Contenido combo 2</div>
   
</div>

Saludos!

Bertitha · #8 (**permalink**) 11/11/2009, 03:44

New he armado mi codigo como lo deseo pero ahora como le hara para desaparecer dependiendo de lo que se seleccione?

este es mi codigo:

Código HTML:

<form enctype="multipart/form-data" name='ejemplo'>
<select>
    <option onclick="document.getElementById('ComboBox').style. display = (this.selected) ? 'block' : 'none' ">Cliente</option>
    <option onclick="document.getElementById('ComboBox1').style. display = (this.selected) ? 'block' : 'none' ">Prospecto</option>
    <option>Contacto</option>
  </select>
<div id="ComboBox" style="display:none">
      <select>
        <option onclick="document.getElementById('Combo1').style. display = (this.selected) ? 'block' : 'none' ">Activo</option>
        <option onclick="document.getElementById('Combo2').style. display = (this.selected) ? 'block' : 'none' ">Inactivo</option>
      </select>
       <div id="Combo1" style="display:none">
       <input type="text" name="texto" id="texto" />
       <textarea name="area" id="area" cols="50" rows="3"></textarea>
       <input type="file" name="archivo" id="archivo" />
       </div>
       <div id="Combo2" style="display:none">
       <input type="text" name="texto" id="texto" />
       <textarea name="area" id="area" cols="50" rows="3"></textarea>
       </div>
</div>
<div id="ComboBox1" style="display:none">
<input type="file" name="archivo" id="archivo" />
<textarea name="area" id="area" cols="50" rows="3"></textarea>
</div>
</form>

La verdad es que no se javascript.

iovan · #9 (**permalink**) 11/11/2009, 15:25

para ello tendras que ayudarte de validacions en ajax o posiblemente tan solo con javascript.

Consulta eso en el foro de Ajax o JavaScript, ya que yo desconozco como puedes desaparecer divs con listas/menu

Para que te des una idea sería algo asi

Código html:

Ver original<script language="JavaScript1.2">
function mostrar(combo) { 
document.getElementById(combo).style.display='';
}
 
function ocultar(combo) { 
document.getElementById(combo).style.display='none' (this.selected) ? 'block' : 'none';
}
</script>
 
<select>
    <option onclick="mostrar('ComboBox');ocultar('ComboBox')">Cliente</option>
  </select>
 
<div id="ComboBox" style="display:none;">Contenido oculto</div>

Solo es para que te des una idea, dudo mucho que esto funcione especificamente asi escrito.
Saludos,