Foros del Web » Programando para Internet » Javascript »

problema con script combobox nivel 2 + imagen y descripcion.

Estas en el tema de problema con script combobox nivel 2 + imagen y descripcion. en el foro de Javascript en Foros del Web. holas estoy tratando de mejorrar un script que tengo desde hace buen rato pero no logro los resuktados, quisiera sujerencias, ejmplos e ideas, cualquier informacion ...
  #1 (permalink)  
Antiguo 24/09/2009, 08:38
 
Fecha de Ingreso: mayo-2009
Mensajes: 200
Antigüedad: 15 años
Puntos: 7
Exclamación problema con script combobox nivel 2 + imagen y descripcion.

holas estoy tratando de mejorrar un script que tengo desde hace buen rato pero no logro los resuktados, quisiera sujerencias, ejmplos e ideas, cualquier informacion esta biem.

les dejo los codigos. para que revisen por donde voy:


Código HTML:
<!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=utf-8" />
<title>Sin título 1</title>
<style type="text/css">
.style1 {
	border-style: solid;
	background-image: url('bk1.jpg');
}
.style2 {
	color: #FF0000;
}
.style3 {
	text-align: center;
}
</style>
</head>

<body>

<table style="width: 1024px; height: 768px" class="style1">
	<tr>
		<td >
			<label name="img" style="position: absolute; width: 277px; height: 331px; z-index: 2; left: 721px; top: 57px" id="img" class="style2">
			</label>
			<div style="position: absolute; width: 574px; height: 421px; z-index: 1; left: 61px; top: 72px" id="capa1" class="style3">
			<p align="center" style="margin-top: 8px; margin-bottom: 3px"><i><b>
			<font color="#FF0000">CREAR PERSONAJE</font></b></i></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="525" id="table1">
<tr>
<td height="30" width="87"><font color="#FF0000">Nombre:</font></td>
<td height="30" width="438">
<label>
<input name="namepj" id="namepj" size="37" style="float: left">
</label>
</td>
</tr>
<tr>
<td height="30" width="87"><font color="#FF0000">Raza:</font></td>
<td height="30" width="438">
<p align="left">
<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"><font color="#FF0000">Profesión:</font></td>
<td height="30" width="438">
<p align="left">
<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"><font color="#FF0000">Sexo:</font></td>
<td height="30" width="438">
<p align="left">
<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"><font color="#FF0000">Edad:</font></td>
<td height="30" width="438">
<p align="left">
<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"><font color="#FF0000">Apariencia:</font></td>
<td height="60" width="438" rowspan="2">
<p align="left">
<label>
<textarea name=apa type="text" ROWS=7 COLS=50 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("Escoja una Profecion"," ");

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 style="position: absolute; width: 315px; height: 240px; z-index: 1; left: 39px; top: 515px" id="capa4" class="style2">
			<iframe id="marco" width="315" height="240" src="inf.html">
			</iframe>
			</div>
			<div style="position: absolute; width: 240px; height: 240px; z-index: 1; left: 764px; top: 515px" id="capa5" class="style2">
			lol2
			</div>
			<div style="position: absolute; width: 315px; height: 240px; z-index: 1; left: 404px; top: 515px" id="capa6" class="style2">
			lol3
			</div>
		</td>
	</tr>
</table>

</body>

</html> 
  #2 (permalink)  
Antiguo 24/09/2009, 08:42
 
Fecha de Ingreso: mayo-2009
Mensajes: 200
Antigüedad: 15 años
Puntos: 7
Respuesta: problema con script combobox nivel 2 + imagen y descripcion.

la idea es la siguiente: al selecionar una raza en el segundo combo box aparecen solo las profeciones de esa raza, pero la idea era que al selecionar una raza tambien aparesca en las otras capas informacion respecto a esa raza sea el laber img la imagen de la raza y la capa 4 informacion sobre la raza, al selecionar la la profecion aparesca la informacion e n la capa 6.

pero intente hacer varias cosas pero no lo gre hacerlo funcionar supongo que el problema deve estar en el escript
  #3 (permalink)  
Antiguo 25/09/2009, 10:14
 
Fecha de Ingreso: mayo-2009
Mensajes: 200
Antigüedad: 15 años
Puntos: 7
Respuesta: problema con script combobox nivel 2 + imagen y descripcion.

Codigo revisado depurado y pasado en 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>
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




La zona horaria es GMT -6. Ahora son las 09:10.