Comunidad de diseño web y desarrollo en internet online

Elementos menu listas <select> enlazados con js

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 09 Jul 2014 01:39 am
Hola a todos por acá, antes que nada un saludo y gracias por interesarse en mi post, he venido armando una serie de conexiones con elementos <select> conectando mediante java script los contenidos y haciendo que al seleccionar el último campo de búsqueda aparecen divs que son invisibles con la información correspondiente a ese campo.

está casi listo, sólo que no logro resetear la parte cuando aparecen los divs al momento de que el usuario selecciona otro elemento de otra lista, el div final se queda, y en la lista final se quedan los elementos visibles es decir;

tengo un orden de búsqueda donde en el primer selec va "País" al seleccionar país el siguiente select solicita "Seleccione producto" al siguiente select "Seleccione Cultivo" en el select final es "selecciona una plaga" al seleccionar la plaga se vuelve visible un div con la info de esa plaga, pero al reseleccionar algún elemento de cualquier lista anterior, el select de plaga no se resetea y los divs siguen visibles, quisiera saber si alguien tiene una idea de cómo lograrlo, me sería de gran apoyo.


Gracias nuevamente, por acá comparto los archivos para ver si alguien pudiera tener una solución..


Acá el html:
<head>
<script type="text/javascript" src="codigo.js">
</script>

<style type="text/css">
#tblWrapper div { display:none; }
}
</style>


</head>

<body>
<h1>&nbsp;</h1>
<form name="myform">
<div align="center">
<p>
<select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value,document.myform.opttwo);changeTblDisplay(this.value)">
<option value=" " selected="selected">Escoja un
país</option>
<option value="1">México</option>
<option value="2">Colombia</option>
<option value="3">Perú</option>
<option value="4">Ecuador</option>
</select>
<br>
&nbsp;<br>
<select name="opttwo" size="1" onchange="setOptions(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value,document.myform.optthree);changeTblDisplay(this.value)">
<option value="0" selected="selected"></option>
<option value="11"></option>
<option value="12"></option>
<option value="13"></option>
<option value="14"></option>
<option value="15"></option>
</select>
<br>
&nbsp;<br>
<select name="optthree" size="1" onchange="setOptions(document.myform.optthree.options[document.myform.optthree.selectedIndex].value,document.myform.optfour); changeTblDisplay(this.value)">
<option value="0" selected="selected"></option>
<option value="121"></option>
<option value="122"></option>
</select>
<br>

<div id="tblWrapper">

<select id="tblDisplay" name="optfour" onchange="changeTblDisplay(this.value)">
<option value=""></option>
<option value="131"></option>
<option value="132"></option>
<option value="133"></option>
<option value="134"></option>
</select>

<!--MÉXICO CALABAZA-->

<div id="132" width="50%">
<table border="1" width="50%">
<thead> <caption> Table 1 </caption> </thead>
<tbody>
<tr> <td> Item 1 </td> <td>Item 2 </td><td>Item 3</td> </tr>
<tr> <td> Item 4 </td> <td> Item 5 </td><td>Item 6</td> </tr>
</tbody>
</table>
</div>

<div id="133" width="50%">
<table border="1" width="50%">
<thead> <caption> Table 2 </caption> </thead>
<tbody>
<tr> <td> Joe </td> <td> Sally </td> </tr>
<tr> <td> Bill </td> <td> Jane</td> </tr>
<tr> <td> Ed </td> <td> Alice</td> </tr>
</tbody>
</table>
</div>

<div id="134" width="50%">
<table border="1" width="50%">
<thead> <caption> Table 3 </caption> </thead>
<tbody>
<tr> <td> lombriz </td> <td> 1 </td> </tr>
<tr> <td>lombriz </td> <td> 2</td> </tr>
<tr> <td> lombriz </td> <td> 3</td> </tr>
</tbody>
</table>
</div>

<!--MÉXICO PAPA-->

<div id="135" width="50%">
<table border="1" width="50%">
<thead> <caption> Papa 1 </caption> </thead>
<tbody>
<tr> <td> Item 1 </td> <td>Item 2 </td><td>Item 3</td> </tr>
<tr> <td> Item 4 </td> <td> Item 5 </td><td>Item 6</td> </tr>
</tbody>
</table>
</div>

<div id="136" width="50%">
<table border="1" width="50%">
<thead> <caption> Papa 2 </caption> </thead>
<tbody>
<tr> <td> Joe </td> <td> Sally </td> </tr>
<tr> <td> Bill </td> <td> Jane</td> </tr>
<tr> <td> Ed </td> <td> Alice</td> </tr>
</tbody>
</table>
</div>

<div id="137" width="50%">
<table border="1" width="50%">
<thead> <caption> Papa 3 </caption> </thead>
<tbody>
<tr> <td> lombriz </td> <td> 1 </td> </tr>
<tr> <td>lombriz </td> <td> 2</td> </tr>
<tr> <td> lombriz </td> <td> 3</td> </tr>
</tbody>
</table>
</div>

<!--MÉXICO LECHUGA-->

<div id="138" width="50%">
<table border="1" width="50%">
<thead> <caption> Lechuga 1 </caption> </thead>
<tbody>
<tr> <td> Item 1 </td> <td>Item 2 </td><td>Item 3</td> </tr>
<tr> <td> Item 4 </td> <td> Item 5 </td><td>Item 6</td> </tr>
</tbody>
</table>
</div>

<div id="139" width="50%">
<table border="1" width="50%">
<thead> <caption> Lechuga 2 </caption> </thead>
<tbody>
<tr> <td> Joe </td> <td> Sally </td> </tr>
<tr> <td> Bill </td> <td> Jane</td> </tr>
<tr> <td> Ed </td> <td> Alice</td> </tr>
</tbody>
</table>
</div>

<div id="140" width="50%">
<table border="1" width="50%">
<thead> <caption> Lechuga 3 </caption> </thead>
<tbody>
<tr> <td> lombriz </td> <td> 1 </td> </tr>
<tr> <td>lombriz </td> <td> 2</td> </tr>
<tr> <td> lombriz </td> <td> 3</td> </tr>
</tbody>
</table>
</div>

<!--MÉXICO BROCOLI-->

<div id="141" width="50%">
<table border="1" width="50%">
<thead> <caption> Brocoli 1 </caption> </thead>
<tbody>
<tr> <td> Item 1 </td> <td>Item 2 </td><td>Item 3</td> </tr>
<tr> <td> Item 4 </td> <td> Item 5 </td><td>Item 6</td> </tr>
</tbody>
</table>
</div>

<div id="142" width="50%">
<table border="1" width="50%">
<thead> <caption> Brocoli 2 </caption> </thead>
<tbody>
<tr> <td> Joe </td> <td> Sally </td> </tr>
<tr> <td> Bill </td> <td> Jane</td> </tr>
<tr> <td> Ed </td> <td> Alice</td> </tr>
</tbody>
</table>
</div>

<div id="143" width="50%">
<table border="1" width="50%">
<thead> <caption> Brocoli 3 </caption> </thead>
<tbody>
<tr> <td> lombriz </td> <td> 1 </td> </tr>
<tr> <td>lombriz </td> <td> 2</td> </tr>
<tr> <td> lombriz </td> <td> 3</td> </tr>
</tbody>
</table>
</div>

</tbody>
</table>
</div>
</form>



----


Acá el js:

function Ayuda(identificador) {
identificador.style.visibility='visible';
}


function Desaparece(identificador)
{
identificador.style.visibility='hidden';
}


function setOptions(chosen, selbox) {


selbox.options.length = 0;

if (chosen == "") {
selbox.options[selbox.options.length] = new Option('Seleccione un país de la lista de arriba',' ');
setTimeout(setOptions(' ',document.myform.optfour),5);
}

/*PRIMERA SELECCIÓN*/

/*MÉXICO*/

if (chosen == "1") {

selbox.options[selbox.options.length] = new Option('Seleccione un producto','11');

selbox.options[selbox.options.length] = new Option('Fungicidas','12');
setTimeout(setOptions('11',document.myform.optthree),5);

selbox.options[selbox.options.length] = new Option('Insecticidas','13');
setTimeout(setOptions('11',document.myform.optthree),5);

selbox.options[selbox.options.length] = new Option('Herbicidas','14');
setTimeout(setOptions('11',document.myform.optthree),5);

selbox.options[selbox.options.length] = new Option('Herbicidas de uso Urbano','15');
setTimeout(setOptions('11',document.myform.optthree),5);

}

/*SEGUNDA SELECCIÓN*/

/*MÉXICO*/

if (chosen == "12") {
selbox.options[selbox.options.length] = new Option('Seleccione un cultivo','121');

selbox.options[selbox.options.length] = new Option('calabaza','122');
selbox.options[selbox.options.length] = new Option('papa','123');
}

if (chosen == "13") {
selbox.options[selbox.options.length] = new Option('Seleccione un cultivo','121');

selbox.options[selbox.options.length] = new Option('lechuga','124');
selbox.options[selbox.options.length] = new Option('brocoli','125');
}


if (chosen == "122") {
selbox.options[selbox.options.length] = new Option('Seleccione una plaga','131');

selbox.options[selbox.options.length] = new Option('Calabaza mx Gusanos','132');
selbox.options[selbox.options.length] = new Option('Calabaza mx Chinches','133');
selbox.options[selbox.options.length] = new Option('Calabaza mx lombriz','134');

}

if (chosen == "123") {
selbox.options[selbox.options.length] = new Option('Seleccione una plaga','131');

selbox.options[selbox.options.length] = new Option('Papa mx Gusanos','135');
selbox.options[selbox.options.length] = new Option('Papa mx Chinche','136');
selbox.options[selbox.options.length] = new Option('Papa mx lombriz','137');

}


if (chosen == "124") {
selbox.options[selbox.options.length] = new Option('Seleccione una plaga','131');

selbox.options[selbox.options.length] = new Option('lechuga mx Gusanos','138');
selbox.options[selbox.options.length] = new Option('lechuga mx Chinches','139');
selbox.options[selbox.options.length] = new Option('lechuga mx lombriz','140');

}

if (chosen == "125") {
selbox.options[selbox.options.length] = new Option('Seleccione una plaga','131');

selbox.options[selbox.options.length] = new Option('brocoli mx Gusanos','141');
selbox.options[selbox.options.length] = new Option('brocoli mx Chinche','142');
selbox.options[selbox.options.length] = new Option('brocoli mx lombriz','143');

}

/*COLOMBIA PRIMERA SELECCIÓN*/

if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('Seleccione un producto','21');

selbox.options[selbox.options.length] = new Option('Fungicidas','22');


selbox.options[selbox.options.length] = new Option('Insecticidas','23');


selbox.options[selbox.options.length] = new Option('Herbicidas','24');


}

/*COLOMBIA SEGUNDA SELECCIÓN*/

if (chosen == "22") {
selbox.options[selbox.options.length] = new Option('Seleccione un cultivo','221');

selbox.options[selbox.options.length] = new Option('Fungicidas Brocoli','222');
selbox.options[selbox.options.length] = new Option('Fungicidas Lechuga','223');
selbox.options[selbox.options.length] = new Option('Fungicidas Cilantro','224');
}

if (chosen == "23") {
selbox.options[selbox.options.length] = new Option('Seleccione un cultivo','221');

selbox.options[selbox.options.length] = new Option('Insecticidas Brocoli','222');
selbox.options[selbox.options.length] = new Option('Insecticidas Lechuga','223');
selbox.options[selbox.options.length] = new Option('Insecticidas Cilantro','224');
}

if (chosen == "24") {
selbox.options[selbox.options.length] = new Option('Seleccione un cultivo','221');

selbox.options[selbox.options.length] = new Option('Herbicidas Brocoli','222');
selbox.options[selbox.options.length] = new Option('Herbicidas Lechuga','223');
selbox.options[selbox.options.length] = new Option('Herbicidas Cilantro','224');
}

/*COLOMBIA TERCERA SELECCIÓN*/

if (chosen == "222") {
selbox.options[selbox.options.length] = new Option('Seleccione una plaga','131');

selbox.options[selbox.options.length] = new Option('brocoli col Gusanos','141');
selbox.options[selbox.options.length] = new Option('brocoli col Chinche','142');
selbox.options[selbox.options.length] = new Option('brocoli col lombriz','143');

}

if (chosen == "223") {
selbox.options[selbox.options.length] = new Option('Seleccione una plaga','131');

selbox.options[selbox.options.length] = new Option('lechuga col Gusanos','144');
selbox.options[selbox.options.length] = new Option('lechuga col Chinche','145');
selbox.options[selbox.options.length] = new Option('lechuga col lombriz','146');

}

if (chosen == "224") {
selbox.options[selbox.options.length] = new Option('Seleccione una plaga','131');

selbox.options[selbox.options.length] = new Option('cilantro col Gusanos','147');
selbox.options[selbox.options.length] = new Option('cilantro col Chinche','148');
selbox.options[selbox.options.length] = new Option('cilantro col lombriz','149');

}

/*PERU*/

if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('Perú 1','31');
selbox.options[selbox.options.length] = new Option('Perú 2','32');
setTimeout(setOptions('31',document.myform.optthree),5);
}

if (chosen == "4") {
selbox.options[selbox.options.length] = new Option('Ecuador 1','31');
selbox.options[selbox.options.length] = new Option('Ecuador 2','32');
setTimeout(setOptions('31',document.myform.optthree),5);
}



/*PERÚ*/

if (chosen == "31") {
selbox.options[selbox.options.length] = new Option('Perú 1-1','311');
selbox.options[selbox.options.length] = new Option('Perú 1-2','312');
}

if (chosen == "32") {
selbox.options[selbox.options.length] = new Option('Perú 2-1','321');
selbox.options[selbox.options.length] = new Option('Perú 2-2','322');
}

if (chosen == "33") {
selbox.options[selbox.options.length] = new Option('Perú 2-1','321');
selbox.options[selbox.options.length] = new Option('Perú 2-2','322');
}

}
//<-------------------------------------->

function changeTblDisplay(IDS) {
if (IDS == '') { return; }
var sel = document.getElementById('tblWrapper').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
document.getElementById(IDS).style.display = 'block';
}

//<-------------------------------------->

Por demonmexxx

4 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 09 Jul 2014 03:32 pm

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 09 Jul 2014 04:27 pm
Este otro ejemplo de mi autoria, en lo personal casi no utilizo JS amenos que sea muy necesario.

http://elporfirio.com/wp/2013/10/como-hacer-un-combo-select-option-dinamico/

Mas que nada por el crossbrowsing slavo eso JS puro es la ley

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado     Web

FullStack Web Developer

firefox
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.