3

Tengo la duda de como poder deshabilitar opciones de un select, dependiendo de otro select.

Por ejemplo:

//SELECT 1
<select class="opciones">
    <option value="1">Opcion 1</option>
    <option value="2">Opcion 2</option>
</select>

//SELECT 2
<select>
    <option value="1">Ejemplo #1</option>
    <option value="2">Ejemplo #2</option>
    <option value="3">Ejemplo #3</option>
    <option value="4">Ejemplo #4</option>
</select>

Al momento de elegir, por ejemplo, en el select1 elegir opcion 1, entonces deshabilitar en el segundo select2: ejemplo 1 y ejemplo 2.

$(".caja").on("change",".opciones",function(){
    /*obtener opciones elegidas del select*/
    var opciones = $(".opciones option:selected");

    opciones = parseInt(opciones);

    if(opciones == 1)
    {
        // ??
    }

});

¿De qué forma se podría realizar?

1 respuesta 1

3

Lo puedes lograr de este modo con JS puro:

  • Empiezo por agregarle un id único a cada select
  • Obtén el texto que esta entre las etiquetas de apertura y cierre de <option></option> con ayuda de la propiedad text
  • Nos apoyamos del evento change para escuchar cuando ocurre una selección en el menú desplegable
  • Guradamos en una variable la selección que hizo el usuario y con un condicional simple verificamos si el texto almacenado coincide con Opcion 1
  • El segundo select que tenemos es una lista de nodos por lo cual lo podemos tratar como un vector
  • Entonces para deshabilitar las 2 opciones deseadas basta con indicar entre corchetes la posición numérica que ocupan
  • Accedemos a la propiedad disabled la cual le asignamos un valor booleano como true

EJEMPLO

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ejemplo</title>
</head>
<body>
<select id="opciones1">
    <option value="0">Opcion 0</option>
    <option value="1">Opcion 1</option>
    <option value="2">Opcion 2</option>
</select>

//SELECT 2
<select id="opciones2">
    <option value="1">Ejemplo #1</option>
    <option value="2">Ejemplo #2</option>
    <option value="3">Ejemplo #3</option>
    <option value="4">Ejemplo #4</option>
</select>
<script>
    let opciones1 = document.getElementById("opciones1")
    let opciones2 = document.getElementById("opciones2")
    
    opciones1.addEventListener("change", () => {
      let texto = opciones1.options[opciones1.selectedIndex].text
      if (texto === "Opcion 1") {
       opciones2[0].disabled = true
       opciones2[1].disabled = true
      } 
    })
</script>
</body>
</html>

Una vez que estén deshabilitados, si elegimos cualquier otra opción del menú los podemos volver a habilitar manejando ese comportamiento en la estructura del condicional por medio del bloque else así:

else {
       opciones2[0].disabled = false
       opciones2[1].disabled = false
      }

Edición

La misma solución pero con un enfoque orientado a objetos:

class Desplegable {
  constructor(menuUno, menuDos) {
    this.menuUno = menuUno
    this.menuDos = menuDos
  }

  deshabilitaElementos() {
    this.menuUno.addEventListener("change", () => {
     (this.menuUno.options[this.menuUno.selectedIndex].text === "Opcion 1") 
      ? (this.menuDos[0].disabled = true, this.menuDos[1].disabled = true) 
      : (this.menuDos[0].disabled = false, this.menuDos[1].disabled = false)
    })
  }
}

let menuUno1 = document.getElementById("opciones1")
let menuDos2 = document.getElementById("opciones2")
const cambio = new Desplegable(menuUno1, menuDos2)
cambio.deshabilitaElementos()

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.