Skip to main content
se añadieron 160 caracteres en el cuerpo
Origen Enlace

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.

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.

se añadieron 102 caracteres en el cuerpo
Origen Enlace

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

se añadieron 145 caracteres en el cuerpo
Origen Enlace
$(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(indiceOpcionBloqueadaindiceOpcionBloqueada2).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   
     $("#cars"".select2-selection__choice__remove").on("click button[class=select2-selection__choice__remove] disabled""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>
$(document).ready(function(){

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

    //  seleciona la opción del indiceOpcionBloqueada
    $("#cars").find("option").eq(indiceOpcionBloqueada).prop("selected", true);
    
    // Deshabilita la opción del indiceOpcionBloqueada
     $("#cars").find("option").eq(indiceOpcionBloqueada).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   
    $("#cars").on("click button[class=select2-selection__choice__remove] disabled", 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>
$(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>
Origen Enlace
Loading