JQUERY: Modificar opciones de un SELECT

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...

$("#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...

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...