JQUERY: Modificar opciones de un SELECT

  • Autor Autor zorrero
  • Fecha de inicio Fecha de inicio
zorrero

zorrero

Dseda
Social Media
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Buenas 🙂, he buscado documentación y no encontre una solución. No entiendo que puede estar sucediendo. Estoy usando Materialize.
He creado un multiple select donde la idea es que los usuarios puedan seleccionar opciones y dependiendo la que elijan, las opciones del select cambien.

Captura de Pantalla 2020-08-27 a la(s) 13.58.17.webp


- Si un usuario selecciona "Globales", todas las opciones deberían "desmarcarse", quedando sólo seleccionado globales
- Si un usuario selecciona "LATAM", todas los paises deberían seleccionarse
- Si un usuario selecciona cualquier pais, debería desmarcarse "LATAM" y "GLOBAL"
- Si un usuario selecciona todos los paises, debería marcarse "LATAM" además de todos los paises ya seleccionados

El código:

HTML
HTML: 
    <select multiple id="countries">
        <option value="" disabled selected>Selecciona hasta 6 paises</option>
        <option id="globalc" class="global" value="1" selected>Globales</option>
        <option class="latam" value="2">LATAM</option>
        <option class="segmented" value="3">Argentina</option>
        <option class="segmented" value="3">Brasil</option>
        <option class="segmented" value="3">Bolivia</option>
        <option class="segmented" value="3">Colombia</option>
        <option class="segmented" value="3">Chile</option>
        <option class="segmented" value="3">Ecuador</option>
        <option class="segmented" value="3">España</option>
        <option class="segmented" value="3">México</option>
        <option class="segmented" value="3">Perú</option>
        <option class="segmented" value="3">Puerto Rico</option>
        <option class="segmented" value="3">Republica Dominicana</option>
        <option class="segmented" value="3">Uruguay</option>
      </select>

Jquery:
JavaScript: 
  $("#countries").change(function(){
            var countries = [];
            $.each($("#countries option:selected"), function(){
                countries.push($(this).val());
            });
            // alert("You have selected the country - " + countries.join(""));
            if (countries[countries.length - 1] == "1") {
              $("option[class='latam']").remove();
              $("option[class='segmented']").remove();
            }else if(countries[countries.length - 1] == "2"){
              $("option[class='global']").remove();
            }else if(countries[countries.length - 1] == "3"){
              $("option[class='global']").remove();
              $("option[class='latam']").remove();
            }
        });

Agradezco mucho si me pueden ayudar. Desde ya muchas gracias.

Saludos!
 
zorrero dijo:
Buenas 🙂, he buscado documentación y no encontre una solución. No entiendo que puede estar sucediendo. Estoy usando Materialize.
He creado un multiple select donde la idea es que los usuarios puedan seleccionar opciones y dependiendo la que elijan, las opciones del select cambien.

Ver el archivo adjunto 337309

- Si un usuario selecciona "Globales", todas las opciones deberían "desmarcarse", quedando sólo seleccionado globales
- Si un usuario selecciona "LATAM", todas los paises deberían seleccionarse
- Si un usuario selecciona cualquier pais, debería desmarcarse "LATAM" y "GLOBAL"
- Si un usuario selecciona todos los paises, debería marcarse "LATAM" además de todos los paises ya seleccionados

El código:

HTML
HTML: 
    <select multiple id="countries">
        <option value="" disabled selected>Selecciona hasta 6 paises</option>
        <option id="globalc" class="global" value="1" selected>Globales</option>
        <option class="latam" value="2">LATAM</option>
        <option class="segmented" value="3">Argentina</option>
        <option class="segmented" value="3">Brasil</option>
        <option class="segmented" value="3">Bolivia</option>
        <option class="segmented" value="3">Colombia</option>
        <option class="segmented" value="3">Chile</option>
        <option class="segmented" value="3">Ecuador</option>
        <option class="segmented" value="3">España</option>
        <option class="segmented" value="3">México</option>
        <option class="segmented" value="3">Perú</option>
        <option class="segmented" value="3">Puerto Rico</option>
        <option class="segmented" value="3">Republica Dominicana</option>
        <option class="segmented" value="3">Uruguay</option>
      </select>

Jquery:
JavaScript: 
  $("#countries").change(function(){
            var countries = [];
            $.each($("#countries option:selected"), function(){
                countries.push($(this).val());
            });
            // alert("You have selected the country - " + countries.join(""));
            if (countries[countries.length - 1] == "1") {
              $("option[class='latam']").remove();
              $("option[class='segmented']").remove();
            }else if(countries[countries.length - 1] == "2"){
              $("option[class='global']").remove();
            }else if(countries[countries.length - 1] == "3"){
              $("option[class='global']").remove();
              $("option[class='latam']").remove();
            }
        });

Agradezco mucho si me pueden ayudar. Desde ya muchas gracias.

Saludos!
Hacer clic para expandir...

Pon tus condiciones dentro de each.
JavaScript: 
$("#countries").change(function(){
            var countries = [];
            $.each($("#countries option:selected"), function(){
                countries.push($(this).val());
                if (countries[countries.length - 1] == "1") {
              $("option[class='latam']").remove();
              $("option[class='segmented']").remove();
              }else if(countries[countries.length - 1] == "2"){
                $("option[class='global']").remove();
              }else if(countries[countries.length - 1] == "3"){
                $("option[class='global']").remove();
                $("option[class='latam']").remove();
              }
            });
            // alert("You have selected the country - " + countries.join(""));
           
        });
 
Stron dijo:
Pon tus condiciones dentro de each.
JavaScript: 
$("#countries").change(function(){
            var countries = [];
            $.each($("#countries option:selected"), function(){
                countries.push($(this).val());
                if (countries[countries.length - 1] == "1") {
              $("option[class='latam']").remove();
              $("option[class='segmented']").remove();
              }else if(countries[countries.length - 1] == "2"){
                $("option[class='global']").remove();
              }else if(countries[countries.length - 1] == "3"){
                $("option[class='global']").remove();
                $("option[class='latam']").remove();
              }
            });
            // alert("You have selected the country - " + countries.join(""));
          
        });
Hacer clic para expandir...

Hola gracias por tu respuesta, ya se encuentran dentro de each 🙁
 
zorrero dijo:
Buenas 🙂, he buscado documentación y no encontre una solución. No entiendo que puede estar sucediendo. Estoy usando Materialize.
He creado un multiple select donde la idea es que los usuarios puedan seleccionar opciones y dependiendo la que elijan, las opciones del select cambien.

Ver el archivo adjunto 337309

- Si un usuario selecciona "Globales", todas las opciones deberían "desmarcarse", quedando sólo seleccionado globales
- Si un usuario selecciona "LATAM", todas los paises deberían seleccionarse
- Si un usuario selecciona cualquier pais, debería desmarcarse "LATAM" y "GLOBAL"
- Si un usuario selecciona todos los paises, debería marcarse "LATAM" además de todos los paises ya seleccionados

El código:

HTML
HTML: 
    <select multiple id="countries">
        <option value="" disabled selected>Selecciona hasta 6 paises</option>
        <option id="globalc" class="global" value="1" selected>Globales</option>
        <option class="latam" value="2">LATAM</option>
        <option class="segmented" value="3">Argentina</option>
        <option class="segmented" value="3">Brasil</option>
        <option class="segmented" value="3">Bolivia</option>
        <option class="segmented" value="3">Colombia</option>
        <option class="segmented" value="3">Chile</option>
        <option class="segmented" value="3">Ecuador</option>
        <option class="segmented" value="3">España</option>
        <option class="segmented" value="3">México</option>
        <option class="segmented" value="3">Perú</option>
        <option class="segmented" value="3">Puerto Rico</option>
        <option class="segmented" value="3">Republica Dominicana</option>
        <option class="segmented" value="3">Uruguay</option>
      </select>

Jquery:
JavaScript: 
  $("#countries").change(function(){
            var countries = [];
            $.each($("#countries option:selected"), function(){
                countries.push($(this).val());
            });
            // alert("You have selected the country - " + countries.join(""));
            if (countries[countries.length - 1] == "1") {
              $("option[class='latam']").remove();
              $("option[class='segmented']").remove();
            }else if(countries[countries.length - 1] == "2"){
              $("option[class='global']").remove();
            }else if(countries[countries.length - 1] == "3"){
              $("option[class='global']").remove();
              $("option[class='latam']").remove();
            }
        });

Agradezco mucho si me pueden ayudar. Desde ya muchas gracias.

Saludos!
Hacer clic para expandir...
Con remove() estás eliminando la optción del select. Lo que tienes es que desmarcarla, no eliminar la etiqueta html. Además, ahí no tienes lógica como para cubrir todas la posibilidades que comentas.

Aquí te dejo una solución funcional: Edit fiddle - JSFiddle - Code Playground

El código no está muy limpio, lo he hecho a la carrera, pero es funcional y se entiende.
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

kahlito
Ampliar formulario select option jquery plugin Chosen (v1.8.7) con lista de categorías y subcat
Respuestas
3
Visitas
282
cholemon
cholemon
R
Modificar opciones de plugin AMP en WordPress
Respuestas
1
Visitas
293
Carlos Arreola
C
R
Cómo modificar opciones de envío en WooCommerce
Respuestas
2
Visitas
371
hasdpk
H
P
Modificar opciones de Modcp
Respuestas
2
Visitas
419
pando
P
C
Modificar opciones de perfil de usuarios antiguos en Vbulletin
Respuestas
2
Visitas
395
chryslerclub
C
Atrás
Arriba