запретить удаление последнего значения в параметрах множественного выбора - select2 - PullRequest
Новая
       19

запретить удаление последнего значения в параметрах множественного выбора - select2

1 голос
/ 11 июля 2019

Выбранный option из базы данных. Теперь я хочу, я могу удалить любые два значения, но последнее значение не может быть удалено. Я пытался disabled: true, но не знаю, как я могу ограничить, чтобы не удалить фамилию. Заранее спасибо. 

$(document).ready(function(){
    $("#test").select2({
      tags: true,
      tokenSeparators: [',', ' ']
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    
<select id="test" multiple style="width:250px" name="lastname">
  <option value="1" selected="selected">One</option>
  <option value="2" selected="selected">Two</option>
  <option value="3" selected="selected">Three</option>
</select>

Ответы [ 2 ]

2 голосов
/ 11 июля 2019

Это должно работать для вас.Для получения дополнительной информации о таких мероприятиях см. официальную документацию . 

$(document).ready(function(){
    $("#test").select2({
      tags: true,
      tokenSeparators: [',', ' ']
    });
    $('#test').on("select2:unselecting", function (e) {
      if($(this).val().length === 1) {
        alert("You cannot remove last value");
        e.preventDefault();
      }
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    
<select id="test" multiple style="width:250px" name="lastname">
  <option value="1" selected="selected">One</option>
  <option value="2" selected="selected">Two</option>
  <option value="3" selected="selected">Three</option>
</select>
1 голос
/ 11 июля 2019

Я уже попробовал какой-то код, и он может хорошо работать 

$(document).ready(function(){
let prevVal = $('#test').val();
$("#test").select2({
  tags: true,
  allowClear: false,
  tokenSeparators: [',', ' ']
}).on("change", function (e) { 
    if($("#test").val() !== null){
        prevVal = $('#test').val();
    }
    else{
        $('#test').val(prevVal)
        $('#test').trigger('change.select2')
    }
});});
...