create a lock class for select2 that can not be deleted

Question

create a lock class for select2 that can not be deleted

Navigation

#1 by (0 votes)

0

I am trying to create a class .lock that can not be deleted. The idea is to make the option element that has this class not be possible to erase it.

I managed to make the class transparent between the elements, but I can not disable the deletion of select2

function setClass(data, container){
	if(data.element){
		$(container).addClass($(data.element).attr("class"));
	}
	return data.text;
}; 

$(".select2").select2({
	templateResult: setClass,
	templateSelection: setClass,
});

.select2-container{
  width:100% !important;
}
.select2-selection__choice.lock{
    background:blue;
    }
.select2-selection__choice.lock .select2-selection__choice__remove{
      display:none !important;
    }

.select2-results__option.lock{
    display:none;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

 <select class="select2" multiple>
   <option class="lock" value="lock" selected>lock</option>
    	<option value="1" selected>1</option>
    	<option value="2">2</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    </select>

// UPDATE I did a filter for the'lock 'class but of all it throws an error in the .select2 ("close"); Anyway, it works for what I need.

function setClass(data, container) {
  if (data.element) {
    //si un elemento tiene un atributo, lo agrega al container como una clase  
    $(container).addClass($(data.element).attr("class"));
  }
  return data.text;
};


$(".select2").select2({
  templateResult: setClass,
  templateSelection: setClass,
  width: '100%',
}).on("select2:unselecting", function(e) {
  // si el elemento era "lock" (que no lo queremos borrar)
  if ($(e.params.args.data.element).hasClass('lock')) {
    // evita la acción por defecto
    e.preventDefault();
    // cierra el menú de select2
    //$(".select2").select2().trigger("select2:close");
    $(".select2").select2("close");
  }
});

.select2-container {
  width: 100% !important;
}

.select2-selection__choice.lock {
  background: blue;
}

.select2-selection__choice.lock .select2-selection__choice__remove {
  display: none !important;
}

.select2-results__option.lock {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />

<select class="select2" multiple name="select">
			<option class="lock" value="NOMBRE" selected>NOMBRE</option>
			<option class="lock" value="APELLIDO" selected>APELLIDO</option>
			<option value="EMAIL" selected>EMAIL</option>
			<option value="Elefante">Elefante</option>
			<option value="DIRECCION">DIRECCION</option>
			<option value="rut">RUT</option>
		</select>

javascript jquery select2

asked by Iván Quiñones Werth 17.10.2017 в 17:59

source

1 answer

Show continuous months instead of month by month or show two months in Android CalendarView Set value of winworm combobox linked to a datatable

score 0 · Accepted Answer

One thing you can do is add a handle to the tag erase event ( select2:unselecting ) and check the name of the tag to be deleted. If it matches the one you do not want to be deleted, then avoid the default action.

Something like this:

function setClass(data, container) {
  if (data.element) {
    $(container).addClass($(data.element).attr("class"));
  }
  return data.text;
};

$(".select2").select2({
  templateResult: setClass,
  templateSelection: setClass,
})
// cuando se borre un elemento
.on("select2:unselecting", function(e) {
  // si el elemento era "lock" (que no lo queremos borrar)
  if (e.params.args.data.text == "lock") {
    // evita la acción por defecto
    e.preventDefault();
    // cierra el menú de select2
    $(".select2").select2("close");
  }
});

.select2-container {
  width: 100% !important;
}

.select2-selection__choice.lock {
  background: blue;
}

.select2-selection__choice.lock .select2-selection__choice__remove {
  display: none !important;
}

.select2-results__option.lock {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<select class="select2" multiple>
  <option class="lock" value="lock" selected>lock</option>
  <option value="1" selected>1</option>
  <option value="2">2</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Originally I had two "lock" options (one that can not be deleted and another that was in the process of being deleted), but looking on the Internet I found this StackOverflow question in English , where the answers suggested using the select2("close") to avoid that behavior.