1

Resulta que tengo la necesidad de crear una etiqueta <select> que controle la selección de otra etiqueta <select>. Es decir, que mi opción seleccionada me despliegue una lista de opciones diferentes en la otra.

Lo que tengo que realizar es que cuando un usuario seleccione un tipo de horario, en el próximo select no se replique el mismo valor, ejemplo:

Esto vendría en mi primer select
05:00 - 06:00
06:00 - 07:00
07:00 - 08:00 <-- Suponiendo que elijo esta opción

Esto deberá aparecer en mi segundo select
05:00 - 06:00
06:00 - 07:00

¿Es posible realizarlo con un script sencillo?

La página la estoy desarrollando en jsp y html...

2
  • Bienvenido al sitio, aquí tienes un par de recursos muy buenos sobre JavaScript: developer.mozilla.org/es/docs/Web/JavaScript (esta será tu nueva biblia del desarrollo web con JavaScript) y de la web que aprendí muchísimo cuando inicié: vagabundia.blogspot.com/2006/09/indice-htmlcss.html (le tengo mucho cariño a ese blog) Por cierto, mantente firme y lograrás lo que te propongas :D Una opción: tener un arreglo y un event listener que detecte el valor seleccionado, un array.splice del elemento y por ahi vas! //ando con el tiempo ajustado para dar una respuesta, disculpa. Saludos
    – fredyfx
    Commented el 31 mar. 2017 a las 18:22
  • es una pregunta muy amplia, ¿lo quieres hacer con datos estáticos?¿Desde una base? eso definiría si lo debes hacer desde jsp(incluiste la etiqueta php, también tendrías que definir si es jsp o php) o desde jquery. Creo que muchos se apresuraron a responder sin saber al menos eso
    – Rene Limon
    Commented el 31 mar. 2017 a las 19:08

2 respuestas 2

0

Claro, puedes hacerlo fácilmente con jquery. En el evento onChange cuando sabes cuál opción fue seleccionada, puedes obtener los elementos que no han sido seleccionados 'option:not(:selected)' y clonarlos en el segundo select.

$(function(){
  $("#select1").on('change', function() {
    $("#select2").html(
      $(this).find('option:not(:selected)').clone()
    );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
  <option>05:00 - 06:00</option>
  <option>06:00 - 07:00</option>  
  <option>07:00 - 08:00</option>  
</select>

<select name="select2" id="select2"></select>

3
  • :' No esta funcionando. Probé tu código añadiendo las opciones para el select 2 pero no me funciona... Help me! Commented el 3 abr. 2017 a las 15:58
  • Podes agregar un ejemplo de lo que hiciste para poder ayudarte?, yo veo que el ejemplo que te dejé funciona
    – Julian
    Commented el 4 abr. 2017 a las 11:32
  • Al parecer ya esta funcionando, no se si tenia que ver el hecho de que le faltara las opciones en el segundo select o que la aplicación no me reconociera el script. jsfiddle.net/9sxtsets Mira aqui como lo probé. TE LO AGRADEZCO DE CORAZÓN AMIGO MUCHAS GRACIAS Commented el 5 abr. 2017 a las 12:33
0

para jquery puedes capturar cada vez que su option cambie, que se ejecute una funcion, en este caso la siguiente

$(document).ready(function(){ // Se ejecuta una vez que el DOM de la pagina este listo
    $( "#codigo" ).change(function() { //Captura cada vez que vea un cambio en el <select> con id "codigo"
          //Ejecuta la accion a realizar
    }); 
});

De esta manera, cada vez que cambies de option, este realizara la funcion que yace donde dice "//Ejecuta la accion a realizar". Espero que te encamine esto

Saludos y éxito en tu trabajo!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.