📣 Seu anúncio aqui? Anuncie no ForoBeta

JQUERY: Modificar opções de um SELECT

  • Autor Autor zorrero
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
zorrero

zorrero

Dseda
Social Media
Verificación en dos pasos activada
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!
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
zorrero disse:
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 o anexo 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!
Clique 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 disse:
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(""));
          
        });
Clique para expandir...

Hola gracias por tu respuesta, ya se encuentran dentro de each 🙁
 
zorrero disse:
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 o anexo 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!
Clique 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 edição:
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

kahlito
Ampliar formulário select option jquery plugin Chosen (v1.8.7) com lista de categorias e subcat
Respostas
3
Visitas
282
cholemon
cholemon
R
Modificar opções de plugin AMP no WordPress
Respostas
1
Visitas
293
Carlos Arreola
C
R
Como modificar opções de envio no WooCommerce
Respostas
2
Visitas
371
hasdpk
H
P
Modificar opções de Modcp
Respostas
2
Visitas
419
pando
P
C
Modificar opções de perfil de usuários antigos no vBulletin
Respostas
2
Visitas
395
chryslerclub
C
Voltar
Topo