Duda sobre controles select

[javier0730]

Buenos días,

Estoy trabajando con un formulario en el cual tengo algunos select que deseo controlar dependiendo de no si se elige algo en otro, es decir que yo tengo un select con las opciones para licenciaturas y otro select para opciones sobre posgrado y deseo que sólo se pueda enviar una opción y que no sea posible mandar el formulario con un valor de cada select, sino únicamente uno.

(para las licenciaturas estoy usando AJAX de segundo nivel porque se debe elejir una carrera como primera opción y otra como segunda opción ya que son 7 licenciaturas) las cuales estan en una tabla de la base de datos, en el caso de los posgrados no se necesita AJAX porque sólo son dos posgrados (una maestria y un doctorado).

Entonces yo tengo el código siguiente:

Código HTML:

<tr>
  <td colspan="2" style="border-bottom:hidden">
    <p align="center"> <font color="#006699" size="3" face="Arial, Helvetica, sans-serif">Selecciona el nivel de estudios </font> </p>
  </td>
</tr>
 
<tr>
  <td align="left" style="border-top:hidden">
    <p><font color="#006699" size="3" face="Arial, Helvetica, sans-serif">Licenciatura:</font></p>
    <p><font color="#006699" size="3" face="Arial, Helvetica, sans-serif"> Primera opción
          <!-- A continuación se llama el método del AJAX -->
            <?php generaCarreras(); ?>
          </font></p>
            
    <p><font color="#006699" size="3" face="Arial, Helvetica, sans-serif">Segunda opción</font><font color="#006699" size="3" face="Arial, Helvetica, sans-serif">
                <select disabled="enabled" name="carrera2" id="carrera2" style="width:410px">
                    <option value="0">Selecciona una opci&oacute;n...</option>
                </select>
           </font></p>
  </td>
          
  <td align="left" style="border-top:hidden">
    <p><font color="#006699" size="3" face="Arial, Helvetica, sans-serif">Posgrado:</font></p>
            
    <select name="posgrados" style="width:auto">
      <option>Selecciona una opci&oacute;n...</option>
      <option>MAESTRIA EN .....</option>
      <option>DOCTORADO EN ....</option>
    </select>
  </td>
</tr>
 

Inicialmente los dos select tienen como valor por defecto Selecciona una opción

Entonces yo deseo que si selecciona una licenciatura, en el campo posgrado se quede el valor por defecto. Y si se selecciona un posgrado entonces que el campo Licenciatura se quede con el valor por defecto.

Hasta aquí no habria problema pero si después de que ya se selecciono una licenciatura, se selecciona un posgrado, ¿como hago para que el valor de licenciatura regrese a su valor por defecto? y del mismo modo si despues de seleccionar un posgrado se selecciona una licenciatura necesito que el campo posgrado regrese a su valor por defecto.

Espero haberme dado a entender.

Gracias.

[maycolalvarez]

en el evento onchange de cada select con Javascript puedes obligar al otro a seleccionar determinada opción, el problema puede presentarse al generar eventos infinitos, podrías probar con el evento onBlur

[javier0730]

Gracias por tu pronta respuesta.

¿y que validación deberá llevar la función que es llamada por el evento?
se me ocurria que en la función comparará si el campo tiene un valor diferente de "Selecciona una opción" pero no comprendo como debo implementarlo para que la comparación se haga con respecto al valor que tiene el otro select y no el que mando llamar la función.

[ryugen]

Mira podes hacer lo siguiente (lo hice en jquery porque es mucho mas rapido):

http://jsfiddle.net/p4bl1t0/hVtPP/

Que los valores se recuperen o no por Ajax es indiferente.
Lo unico que tenes que asegurar es que ambos SELECT tengan una opcion "Seleccione una opcion" que cuyo valor podés definir vos.

Cualquier cosas no dudes en preguntarme.

Saludos

[javier0730]

Gracias por el código.

me parece que no lo implemente correctamente porque no me funciono, lo que hice fue crear un archivo llamado jquery.js y en él coloque el código:

Código Javascript:

$('#lic').change(function(){
    $this = $(this);//El SELECT de licenciaturas
    if($this.val() !== '0'){ //Elegi alguna opcion valida
        $('#posg').val('0');
    }
});
$('#posg').change(function(){
    $this = $(this);//El SELECT de licenciaturas
    if($this.val() !== '0'){ //Elegi alguna opcion valida
        $('#lic').val('0');
    }
});
 

posteriormente en el archivo html entre las etiquetas </head> puse esta linea para llamar el archivo:

Código HTML:

<script language="javascript" type="text/javascript" src="jquery.js"></script>
 

¿Será que no estoy llamando correctamente el archivo?

Gracias

[ryugen]

antes que nada: jquery es un framework de javascript, puedes bajartelo desde su página o usar un CDN, por ejemplo:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
por otro lado para poder implementarlo tal cual está deberías cambiar los id de los select
como podrás ver yo le puse id="lic" al de licenciados y id="prog" al de posgrados

[javier0730]

si, de hecho para hacer la prueba lo hice en un archivo nuevo completamente en blanco (por los que los id que tienes deben de funcionar). Ya qaue quería estar seguro del funcionamiento antes de implementarlo en mi proyecto.

Además ya habia instalado el complemento jQuery_API.mxp y también he agregado la línea que comentas:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Pero no se estan ejecutando las funciones del archivo .js