Select unidos dentro de una tabla

oswaldo12031 · #1 (**permalink**) 09/07/2015, 12:13

Hola espero y me ayuden... tengo en una tabla dos select al seleccionar uno de ellos el segundo tendra que mostrar las opciones de esa opcion elegida en el select primero pero no me funciona le anexo el codigo de la tabla que esta dentro de un php

<script>
//defino una serie de varibles Array para cada concepto
var opciones_1=new Array("-Seleccionar-","Revisión Inicial","Renovación Anual","Enmienda")
var opciones_2=new Array("-Seleccionar-","Codificado en QUIS-SC")
var opciones_3=new Array("-Seleccionar-","Codificado en QUIS-SC")
var opciones_4=new Array("-Seleccionar-","Diseño","Desarrollo","Farmacovigilancia","Coord inación de Estudios","Monitoreo","Aleatorización","Estadístic a","Traducción","Publicación Cintífica","Capacitación","Registro","Protección de Propiedad Intelectual","Protección de Propiedad Industrial","Desarrollo de Prototipo","Incubación de Negocio")

//función que cambia las opciones del select de opciones en función del concepto que se haya escogido en el select de conceptos.
function cambia_opcion()
{
//se toma el valor del select de conceptos elegido
var concepto
concepto= document.f1.concepto[document.f1.concepto.selectedIndex].value
//miro a ver si el concepto está definido
if (concepto != 0)
{
//si estaba definido, entonces coloco las opciones del concepto correspondiente.
//selecciono el array de opciones adecuado
mis_opciones=eval("opciones_" + concepto)
//calculo el numero de opciones
num_opciones = mis_opciones.length
//marco el número de opciones en el select
document.f1.opcion.length = num_opciones
//para cada opcion del array, la introduzco en el select
for(i=0;i<num_opciones;i++)
{
document.f1.opcion.options[i].value=mis_opciones[i]
document.f1.opcion.options[i].text=mis_opciones[i]
}
}
else
{
//si no había opciones seleccionada, elimino las opciones del select
document.f1.opcion.length = 1
//coloco un guión en la única opción que he dejado
document.f1.opcion.options[0].value = "-"
document.f1.opcion.options[0].text = "-"
}
//marco como seleccionada la opción primera de opciones
document.f1.opcion.options[0].selected = true
}
</script>
</head>

<body>



<div id="tab2" class="tab_content">
<div id="quis">

<form autocomplete="off" name="form2" id="form2">

<table class="tablesorter" cellspacing="0">
<tr class="hed">
<th id="th_empresa" colspan="2" style="display:none"><ht><?php echo $preg[1]; ?></ht></th>
</tr>
<tbody>
<div class="spacer"></div>
</table>

<table class="tablesorter" cellspacing="0">
<tr id="tr7" bgcolor="EEEEEE" >
<td width="50%"><h4>7. Conceptos que se Facturaran</h4></td>
<td>  
<form name="f1">
<select name="concepto" onChange="cambia_opcion();">
<option value="0" selected>Seleccione...
<option value="1">Comité de Ética
<option value="2">Sitio Clínico
<option value="3">Unidad Clínica
<option value="4">Innovación y Desarrollo
</select>

<select name=opcion>
<option value="-Seleccionar-">-Seleccionar-
</select>
</form>
</td>
</tr>

horusorion · #2 (**permalink**) 10/07/2015, 01:21

Hola tengo entendido que en javascript al final de cada sentencia se pone punto y coma ya que este no te corre y para peor no nos avisa si hay un error, claro no a simple vista, pero hay extensiones de los navegadores que te ayudan a compilar este codigo y a decirte los errores, pero en ninguna sentencia de javascript tienes un punto y coma.

oswaldo12031 · #3 (**permalink**) 10/07/2015, 11:50

gracias por la respuesta pero me estoy basando en este ejemplo y funciona bien

<html>
<head>
<HEAD>
<meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">
</HEAD>
<title>Conceptos de Cobro</title>
</head>
<script>
//defino una serie de varibles Array para cada concepto
var opciones_1=new Array("-Seleccionar-","Revisión Inicial","Renovación Anual","Enmienda")
var opciones_2=new Array("-Seleccionar-","Codificado en QUIS-SC")
var opciones_3=new Array("-Seleccionar-","Codificado en QUIS-SC")
var opciones_4=new Array("-Seleccionar-","Diseño","Desarrollo","Farmacovigilancia","Coord inación de Estudios","Monitoreo","Aleatorización","Estadístic a","Traducción","Publicación Cintífica","Capacitación","Registro","Protección de Propiedad Intelectual","Protección de Propiedad Industrial","Desarrollo de Prototipo","Incubación de Negocio")

//función que cambia las opciones del select de opciones en función del concepto que se haya escogido en el select de conceptos.
function cambia_opcion()
{
//se toma el valor del select de conceptos elegido
var concepto
concepto= document.f1.concepto[document.f1.concepto.selectedIndex].value
//miro a ver si el concepto está definido
if (concepto != 0)
{
//si estaba definido, entonces coloco las opciones del concepto correspondiente.
//selecciono el array de opciones adecuado
mis_opciones=eval("opciones_" + concepto)
//calculo el numero de opciones
num_opciones = mis_opciones.length
//marco el número de opciones en el select
document.f1.opcion.length = num_opciones
//para cada opcion del array, la introduzco en el select
for(i=0;i<num_opciones;i++)
{
document.f1.opcion.options[i].value=mis_opciones[i]
document.f1.opcion.options[i].text=mis_opciones[i]
}
}
else
{
//si no había opciones seleccionada, elimino las opciones del select
document.f1.opcion.length = 1
//coloco un guión en la única opción que he dejado
document.f1.opcion.options[0].value = "-"
document.f1.opcion.options[0].text = "-"
}
//marco como seleccionada la opción primera de opciones
document.f1.opcion.options[0].selected = true
}
</script>

<body>
<form name="f1">
<select name="concepto" onChange="cambia_opcion()">
<option value="0" selected>Seleccione...
<option value="1">Comité de Ética
<option value="2">Sitio Clínico
<option value="3">Unidad Clínica
<option value="4">Innovación y desarrollo
</select>

<select name=opcion>
<option value="-Seleccionar-">-Seleccionar-
</select>
</form>

</body>
</html>