0

no puedo mostrar el mensaje de alerta al hacer click en la opcion deshabilitada. Ya intente varias formas con onclick, click, attr pero no funcionan.

No se si hay otra forma de solucionarlo o no se sino sea con el id sino con la clase.

La libreria que utilizo es Select2 para crear el combobox multiple.

$(document).ready(function(){

   //select2 dropdown
   $('.js-example-basic-multiple').select2();
    var indiceOpcionBloqueada = 1;
    var indiceOpcionBloqueada2 = 2;

    //  seleciona la opción del indiceOpcionBloqueada
 $("#cars").find("option").eq(indiceOpcionBloqueada).prop("selected", true);
 $("#cars").find("option").eq(indiceOpcionBloqueada2).prop("selected", true);

// Deshabilita la opción del indiceOpcionBloqueada
 $("#cars").find("option").eq(indiceOpcionBloqueada).prop("disabled", true);
 $("#cars").find("option").eq(indiceOpcionBloqueada2).prop("disabled", true);
    
    // Deshabilita el boton de x del opción en Select2
    $("#cars").select2({
            templateSelection: function (data, container) {
                // Verifica si la opción está deshabilitada
                if (data.disabled) {
                    // Deshabilita el botón de eliminación (x)
                    $(container).find(".select2-selection__choice__remove").addClass("disabled");
                }
                return data.text;
            }
        });
        
     //Boton click para mostrar mensaje   
     $(".select2-selection__choice__remove").on("click", function(){
   alert("The paragraph was clicked.");
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>

<select name="cars" id="cars" class="js-example-basic-multiple" multiple>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Opel</option>
    <option value="4">Audi</option>
  </select>
</body>
</html>

introducir la descripción de la imagen aquí

Ya logre mostrar el mensaje pero solo a una opcion seleccionada al darle click en la x, pero al darle click de nuevo a otra opcion seleccionada no funciona.

8
  • Cual sería ese botón, la X ??
    – Yussef
    Commented el 24 may. 2023 a las 18:10
  • @Yussef el boton x esta a la par de la opcion seleccionada Commented el 24 may. 2023 a las 18:14
  • Es que no entiendo, donde hay que presionar ??
    – Yussef
    Commented el 24 may. 2023 a las 18:18
  • No sé entiende bien el problema que estás proponiendo. Da a entender o por lo menos así me lo ha parecido que cuando pulsas en la opción que ya está deshabilitada del desplegable te debería de aparecer el alert, pero no, es cuando pulsas la X de la opción seleccionada Commented el 24 may. 2023 a las 18:20
  • por defecto te aparecen las opciones Saab y Opel deshabilitadas y si pulsas en la X te aparece un alert y te quita la opción, pero si vuelves a pulsar en el desplegable ves que la opción sigue deshabilitada Commented el 24 may. 2023 a las 18:23

1 respuesta 1

1

Seguramente lo que pasa es que Select2 redibuja todo el control, entonces se pierden los eventos. Una forma seria agregarlos cada vez que hay un cambio usando el evento change

$(document).ready(function(){

   //select2 dropdown
   $('.js-example-basic-multiple').select2();
    var indiceOpcionBloqueada = 1;
    var indiceOpcionBloqueada2 = 2;

    //  seleciona la opción del indiceOpcionBloqueada
 $("#cars").find("option").eq(indiceOpcionBloqueada).prop("selected", true);
 $("#cars").find("option").eq(indiceOpcionBloqueada2).prop("selected", true);

// Deshabilita la opción del indiceOpcionBloqueada
 $("#cars").find("option").eq(indiceOpcionBloqueada).prop("disabled", true);
 $("#cars").find("option").eq(indiceOpcionBloqueada2).prop("disabled", true);
    
    // Deshabilita el boton de x del opción en Select2
  $("#cars").select2({
          templateSelection: function (data, container) {
              // Verifica si la opción está deshabilitada
              if (data.disabled) {
                  // Deshabilita el botón de eliminación (x)
                  $(container).find(".select2-selection__choice__remove").addClass("disabled");
              }
              return data.text;
          }
    });
    
    $('#cars').on('change', agregarAlerta);    
    agregarAlerta();
});

function agregarAlerta(){
 $(".select2-selection__choice__remove").on("click", function(){
   alert("The paragraph was clicked.");
 });
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>

<select name="cars" id="cars" class="js-example-basic-multiple" multiple>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Opel</option>
    <option value="4">Audi</option>
  </select>
</body>
</html>

Una mejor forma sería usar el evento select2:unselecting y retornar false para parar el asunto

$(document).ready(function(){

   //select2 dropdown
   $('.js-example-basic-multiple').select2();
    var indiceOpcionBloqueada = 1;
    var indiceOpcionBloqueada2 = 2;

    //  seleciona la opción del indiceOpcionBloqueada
 $("#cars").find("option").eq(indiceOpcionBloqueada).prop("selected", true);
 $("#cars").find("option").eq(indiceOpcionBloqueada2).prop("selected", true);

// Deshabilita la opción del indiceOpcionBloqueada
 $("#cars").find("option").eq(indiceOpcionBloqueada).prop("disabled", true);
 $("#cars").find("option").eq(indiceOpcionBloqueada2).prop("disabled", true);
    
    // Deshabilita el boton de x del opción en Select2
    $("#cars").select2({
            templateSelection: function (data, container) {
                // Verifica si la opción está deshabilitada
                if (data.disabled) {
                    // Deshabilita el botón de eliminación (x)
                    $(container).find(".select2-selection__choice__remove").addClass("disabled");
                }
                return data.text;
            }
        });
        
    $('#cars').on('select2:unselecting', agregarAlerta);   
});


function agregarAlerta(){
  alert("Una alerta");

 
 return false;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>

<select name="cars" id="cars" class="js-example-basic-multiple" multiple>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Opel</option>
    <option value="4">Audi</option>
  </select>
</body>
</html>

1
  • muchas gracias era la segunda opcion la que ocupaba y me funciona genial Commented el 25 may. 2023 a las 23:59

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.