Tema: Problemas evento onmouseover en Opción de Select.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/11/2011, 04:30
agcforos
 
Fecha de Ingreso: julio-2011
Mensajes: 91
Antigüedad: 13 años, 4 meses
Puntos: 2
Problemas evento onmouseover en Opción de Select.
Hola a todos.
Me estoy encontrando con un problema al disparar el evento onmouseover cada vez que entra en una opción de un Select.
Me explico, o lo intento:
Tengo una Select con una serie de opciones y pretendo que cuando entro en cualquiera de estas opciones acceda al servidor y me devuelva una información que presento en pantalla. Esta información irá cambiando según voy posicionándome en una u otra opción, llamando a una función javascript que irá accediendo al servidor por medio de JQuery/Ajax, y a esta función se la llamará con un parámetro que es un indice del valor seleccionado. He comprobado que la select esta bien construida, con su valor correcto (el indice que comento anteriormente), pero el problema me está dando porque el valor que está enviándo siempre es de la anterior opción seleccionada, es decir, que siempre me está presentando los datos de la anterior select por la que he entrado.
Adjunto los scripts por si alguién me puede aclarar el porqué de este funcionamiento:

Este es el script inicial que realiza todo el proceso.

Código PHP: 
Ver original
  1. <?php
  2.   include ('aprendetu_sc_fns.php');
  3.  
  4.   @session_start();
  5.   
  6.   ?>
  7.         <script src="jquery-1.6.4.min.js"></script>
  8.         <LINK rel="stylesheet" type="text/css" href="cuerpo.css">
  9.      
  10.   <?php
  11.   
  12.   $usuario = $_SESSION['usuario'];
  13.   $nivelUsuario = $_SESSION['nivelUsuario'];
  14.   
  15.   do_html_header("Bienvenido a Aprendetu Online");
  16.   
  17.   ?>
  18.   
  19. <script type="text/javascript">
  20.       
  21.     function showAsignaturas(str){
  22.         var xmlhttp;
  23.         if (str==""){
  24.             document.getElementById("priSelect").innerHTML="";
  25.             return;
  26.         }
  27.         if (window.XMLHttpRequest){
  28.             xmlhttp = XMLHttpRequest();
  29.         } else {
  30.             xmlhttp = ActiveXObject("Microsoft.XMLHTTP");
  31.         }
  32.         xmlhttp.onreadystatechange=function(){
  33.             if (xmlhttp.readyState==4 && xmlhttp.status==200){
  34.                 document.getElementById("priSelect").innerHTML=xmlhttp.responseText;
  35.             }          
  36.         }
  37.         xmlhttp.open("GET", "servAsignaturas.php?as="+str, true);
  38.         xmlhttp.send();
  39.         showTemas(" ");
  40.     }
  41.     
  42.     function showTemas(str1){
  43.         var xmlhttp1;
  44.         if (str1==""){
  45.             document.getElementById("segSelect").innerHTML="";
  46.             return;
  47.         }
  48.         if (window.XMLHttpRequest){
  49.             xmlhttp1 = XMLHttpRequest();
  50.         } else {
  51.             xmlhttp1 = ActiveXObject("Microsoft.XMLHTTP");
  52.         }
  53.         xmlhttp1.onreadystatechange=function(){
  54.             if (xmlhttp1.readyState==4 && xmlhttp1.status==200){
  55.                 document.getElementById("segSelect").innerHTML=xmlhttp1.responseText;
  56.             }          
  57.         }
  58.         xmlhttp1.open("GET", "servTemas.php?tem="+str1, true);
  59.         xmlhttp1.send();
  60.     }
  61.    
  62.     function informaPreguntas(str2){
  63.         $(document).ready(function(){
  64.             $("#preguntasTema").load("servPreguntas.php?tem="+str2);
  65.         })
  66.     }
  67.     
  68.     /*function salimosFuera(str2){
  69.         $(document).ready(function(){
  70.             $("#preguntasTema").css({
  71.                 display: none
  72.             });   
  73.         })
  74.     }*/
  75. </script>
  76.   
  77. </head>
  78.  
  79. <body>
  80.  
  81.     <!--<div id="contenidoCursos" align="left"></div>-->
  82.     
  83.     <table>
  84.     <tr><td height="15px"></td></tr>
  85.     <tr>
  86.         <th width="250px" align="left">Cursos</th>
  87.         <th width="250px" align="left">Asignaturas</th>
  88.         <th width="250px" align="left">Temas</th>
  89.     </tr>
  90.     <tr>
  91.     <td>
  92.     <div id="sel">
  93.         <select name="listaCursos" onchange="showAsignaturas(this.value)">
  94.             <?php include "servCursos.php" ?>      
  95.         </select>
  96.     </div>
  97.     </td>
  98.     <td>
  99.     <div id="priSelect">
  100.         <select name="listaAsignaturas" onchange="showTemas(this.value)">
  101.             <option>Selecciona una asignatura</option>
  102.         </select>
  103.     </div>
  104.     </td>
  105.     <td>
  106.     <div id="segSelect">
  107.         <select name="2" onmouseover="informaPreguntas(this.value)">
  108.             <option>Selecciona un tema</option>
  109.         </select>  
  110.     </div>
  111.     </td>
  112.     <td><div style="width: 200px; background-color: #ff8800; padding-left: 10px;" id="preguntasTema"></div></td>
  113.     <td>
  114.         <div id="boton">
  115.             <input type="button" value="Aceptar" />
  116.         </div>
  117.     </td>
  118.     </tr>
  119.     </table>
  120.  
  121. </body>
  122. </html>


Y esta es la select que carga los distintos temas que quiero presentar:

Código PHP: 
Ver original
  1. <?php
  2.     include ('aprendetu_sc_fns.php');
  3.     echo '<select name="temas" onmouseover="informaPreguntas(this.value)">';
  4.     $conn = db_connect();
  5.     $query = "select * from temas";
  6.     $result = @mysql_query($query);
  7.     echo "<option>Selecciona un tema</option>";
  8.     while($fila = mysql_fetch_array($result)){
  9.         if ($fila['idasignatura'] == $_GET['tem']){
  10.             echo "<option value='".$fila['idtema']."'>".$fila['desctema']."</option>";
  11.         }
  12.     }
  13.     mysql_close($conn);
  14.     echo '</select>';
  15. ?>


Muchas gracias anticipadas y saludos.