Combo box

arcanisgk1 · #1 (**permalink**) 17/09/2009, 14:21

hola consegui el siguiente codigo html:

codigo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nombre</title>
</head>

<body>
<div style="position: absolute; width: 489px; height: 387px; z-index: 2; left: 6px; top: 4px" id="capa3" align="center">
<p align="center" style="margin-top: 8px; margin-bottom: 3px">CREAR PERSONAJE</p>
<form name="form1" method="post" action="ser.php"> 
<div style="position: absolute; width: 402px; height: 325px; z-index: 1; left: 18px; top: 40px" id="capa1" align="center">
<table cellpadding="0" cellspacing="0" height="30" width="450" id="table1">
<tr>
<td height="30" width="87">Nombre:</td>
<td height="30" width="363">
<label>
<input name="namepj" type="text" id="namepj" size="37">
</label>
</td>
</tr>
<tr>
<td height="30" width="87">Raza:</td>
<td height="30" width="363">
<label>
<select name="raza" size="1" type="text" id="raza" onChange="redirect(this.options.selectedIndex)">
<option selected>--Escoja una Raza--</option>
<option value="humano">Humano</option>
<option value="argonautas">Argonauta</option>
<option value="enano">Enano</option>
<option value="arunos">Arunos (Elfo)</option>
</select>
</label>
</td>
</tr>
<tr>
<td height="30" width="87">Profesión:</td>
<td height="30" width="363">
<label>
<select name="prof" size="1" type="text" id="prof">
<option value=" " selected> </option>
<option value=" " selected>Prof. Humanos</option>
<option value=" " selected>Prof. Argonautas</option>
<option value=" " selected>Prof. Enanos</option>
<option value=" " selected>Prof. Arunos</option>
</select>
</label> 
</td>
</tr>
<tr>
<td height="30" width="87">Sexo:</td>
<td height="30" width="363">
<label>
<select name="sexo" size="1" type="text" id="sexo">
<option value="m">Masculino</option>
<option value="f">Femenino</option>
</select>
</label>
</td>
</tr>
<tr>
<td height="30" width="87">Edad:</td>
<td height="30" width="363">
<label>
<select name="edad" size="1" type="text" id="edad">
<option value="10">10 años</option>
<option value="20">20 años</option>
<option value="35">35 años</option>
<option value="45">45 años</option>
<option value="55">55 años</option>
<option value="65">65 años</option>
<option value="75">75 años</option>
<option value="85">85 años</option>
<option value="95">95 años</option>
<option value="105">105 años</option>
<option value="120">120 años</option>
</select>
</label>
</td>
</tr>
<tr>
<td height="30" width="87">Apariencia:</td>
<td height="60" width="363" rowspan="2">
<label>
<textarea name=apa type="text" ROWS=7 COLS=40 id="apa" size="41">Descrive la apariencia fisica del personaje
</textarea>
</label>
</td>
</tr>
<tr>
<td height="30" width="87">&nbsp;</td>
</tr>
</table>
<p align="center">
<label>
<input type="submit" name="Submit" value="Continuar con la Creación">

<script>
var groups=document.form1.raza.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("---Select2---"," ");

group[1][0]=new Option("Selecione una Profeción"," ");
group[1][1]=new Option("Guerrero","guerrero");
group[1][2]=new Option("Paladin(Caballero)","paladin");
group[1][3]=new Option("Mercenario(Asesino)","mercenario");
group[1][4]=new Option("Sacerdote","sacerdote");
group[1][5]=new Option("Mago","mago");
group[1][6]=new Option("Brujo","brujo");


group[2][0]=new Option("Selecione una Profeción"," ");
group[2][1]=new Option("Paladin(Caballero)","paladin");
group[2][2]=new Option("Mago","mago"); 
group[2][3]=new Option("Sacerdote","sacerdote");

group[3][0]=new Option("Selecione una Profeción"," ");
group[3][1]=new Option("Guerrero","guerrero");
group[3][2]=new Option("Paladin(Caballero)","paladin");
group[3][3]=new Option("Cazador","116"); 

group[4][0]=new Option("Selecione una Profeción"," ");
group[4][1]=new Option("Guerrero","guerrero");
group[4][2]=new Option("Paladin(Caballero)","paladin"); 
group[4][3]=new Option("Mago","mago");
group[4][4]=new Option("Sacerdote","sacerdotes");

var temp=document.form1.prof

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

</script>

</label>
</p>
</div>

</form>
</div>
</body>

</html>

es el encargado de hacer que cuando escojas una raza te diga las profeciones de esa raza, pero yo queria que a la ves mustre en un cuadro informacion sobre esa raza y tambien sobre la profecion cuando sea selecionada, el problema es que no se como forzar a que aga las 3 cosas a la ves
en la accion de escojer la opcion de raza despliegue a la ves tanto la profeciones como la informacion en un cuadro

la idea era hacer esa informacion e en varios archivos html independientes y que al escojer una opcion cargue el archivo html en un marco

arcanisgk1 · #2 (**permalink**) 21/09/2009, 10:20

aqui les dejo el codigo ya depurado pasado a xhtml.

Cita:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="es" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sin título 1</title>
<style type="text/css" xml:space="preserve">
/*<![CDATA[*/
p.c1 {margin-bottom: 3px; margin-top: 8px; text-align: center}
p.c1 {font-style: italic; font-weight: bold; margin-bottom: 3px; margin-top: 8px; text-align: center}
p.c2 {text-align: center}
p.c3 {text-align: left}
p.c4 {text-align: center}
div.c3 {height: 325px; left: 18px; position: absolute; text-align: center; top: 40px; width: 402px; z-index: 1}
div.c4 {height: 387px; left: 6px; position: absolute; text-align: center; top: 4px; width: 489px; z-index: 2}
div.c5 {height: 325px; left: 18px; position: absolute; text-align: center; top: 40px; width: 402px; z-index: 1}
div.c6 {position: absolute; width: 542px; height: 384px; z-index: 1; left: 61px; top: 72px}
div.c10 {position: absolute; width: 542px; height: 384px; z-index: 1; left: 61px; top: 72px}
table.c7 {width: 1024px; height: 768px}
input.c2 {float: left}
/*]]>*/
</style>
<style type="text/css">
.style1 {
border-style: solid;
background-image: url('bk1.jpg');
}
.style3 {
text-align: center;
}
.style4 {
color: #FF0000;
}
.style5 {
font-family: "Times New Roman", Times, serif;
font-size: small;
}
.style8 {
text-align: center;
}
.style10 {
text-align: center;
}

</style>
</head>
<body>
<table class="style1 c7">
<tr>
<td>
<div id="capa2" class="style3 c6" style="left: 29px; top: 44px; height: 398px; width: 563px">
<p class="c1" style="color: #FF0000">CREAR PERSONAJE</p>
<form name="form1" method="post" action="ser.php" id="form1">
<div class="c5" id="capa3" style="left: 18px; top: 40px; height: 318px">
<table cellpadding="0" cellspacing="0" width="525" id="table2" class="style5">
<tr>
<td height="30" width="87" class="style4">
<strong>Nombre:</strong></td>
<td height="30" width="438">
<label>
<strong>
<input name="namepj" id="namepj" size="37" class="c2" />
</strong>
</label>
</td>
</tr>
<tr>
<td height="30" width="87" class="style4">
<strong>Raza:</strong></td>
<td height="30" width="438">
<p class="c3">
<label>
<strong>
<select name="raza" size="1" id="raza" onchange="redirect(this.options.selectedIndex)">
<option selected="selected">
--Escoja una Raza--</option>
<option value="humano">
Humano</option>
<option value="argonautas">
Argonauta</option>
<option value="enano">
Enano</option>
<option value="arunos">
Arunos (Elfo)</option>
</select>
</strong>
</label>
</p>
</td>
</tr>
<tr>
<td height="30" width="87" class="style4">
<strong>Profesión:</strong></td>
<td height="30" width="438">
<p class="c3">
<label>
<strong>
<select name="prof" size="1" id="prof">
<option value=" " selected="selected">
Prof. Humanos</option>
<option value=" " selected="selected">
Prof. Argonautas</option>
<option value=" " selected="selected">
Prof. Enanos</option>
<option value=" " selected="selected">
Prof. Arunos</option>
</select>
</strong>
</label>
</p>
</td>
</tr>
<tr>
<td height="30" width="87" class="style4">
<strong>Sexo:</strong></td>
<td height="30" width="438">
<p class="c3">
<label>
<strong>
<select name="sexo" size="1" id="sexo">
<option value="m">
Masculino</option>
<option value="f">
Femenino</option>
</select>
</strong>
</label>
</p>
</td>
</tr>
<tr>
<td height="30" width="87" class="style4">
<strong>Edad:</strong></td>
<td height="30" width="438">
<p class="c3">
<label>
<strong>
<select name="edad" size="1" id="edad">
<option value="10">10
años</option>
<option value="20">20
años</option>
<option value="35">35
años</option>
<option value="45">45
años</option>
<option value="55">55
años</option>
<option value="65">65
años</option>
<option value="75">75
años</option>
<option value="85">85
años</option>
<option value="95">95
años</option>
<option value="105">105
años</option>
<option value="120">120
años</option>
</select>
</strong>
</label>
</p>
</td>
</tr>
<tr>
<td height="30" width="87" class="style4">
<strong>Apariencia:</strong></td>
<td height="60" width="438">
<p class="c3">
<label>
<strong>
<textarea name="apa" rows="7" cols="50" id="apa">Descrive la apariencia fisica del personaje</textarea>
</strong>
</label>
</p>
</td>
</tr>

<tr>
<td width="87" style="height: 19px"></td>
</tr>
</table>
<p class="c4" style="margin-top: 2px">
<label>
<input type="submit" name="Submit" value="Continuar con la Creación" />
<script type="text/javascript" xml:space="preserve">
//<![CDATA[
var groups=document.form1.raza.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Escoja una Profeción"," ");

group[1][0]=new Option("Selecione una Profeción"," ");
group[1][1]=new Option("Guerrero","guerrero");
group[1][2]=new Option("Paladin(Caballero)","paladin");
group[1][3]=new Option("Mercenario(Asesino)","mercenario");
group[1][4]=new Option("Sacerdote","sacerdote");
group[1][5]=new Option("Mago","mago");
group[1][6]=new Option("Brujo","brujo");

group[2][0]=new Option("Selecione una Profeción"," ");
group[2][1]=new Option("Paladin(Caballero)","paladin");
group[2][2]=new Option("Mago","mago");
group[2][3]=new Option("Sacerdote","sacerdote");

group[3][0]=new Option("Selecione una Profeción"," ");
group[3][1]=new Option("Guerrero","guerrero");
group[3][2]=new Option("Paladin(Caballero)","paladin");
group[3][3]=new Option("Cazador","cazador");

group[4][0]=new Option("Selecione una Profeción"," ");
group[4][1]=new Option("Guerrero","guerrero");
group[4][2]=new Option("Paladin(Caballero)","paladin");
group[4][3]=new Option("Mago","mago");
group[4][4]=new Option("Sacerdote","sacerdotes");

var temp=document.form1.prof

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

//]]>
</script>
</label>
</p>
</div>
</form>
</div>

<div id="capa10" class="style10 c10" style="left: 660px; top: 43px; height: 399px; width: 265px">
</div>

</td>
</tr>
</table>
</body>
</html>