SELECT2 - Повторяющиеся опции - PullRequest
Новая
       10

SELECT2 - Повторяющиеся опции

0 голосов
/ 25 апреля 2020

У меня несколько выпадающих меню, как показано ниже 

<select class="myselect2" id="emp_select1"></select>
<select class="myselect2" id="emp_select2"></select>
<select class="myselect2" id="emp_select3"></select>

Можем ли мы упростить приведенный ниже код, поскольку их параметры одинаковы? (Пытается не повторяться) 

$("#emp_select1").select2({
  placeholder: "Search for employee",
  minimumInputLength: 1,
  ajax: {
    url: "something.php",
    dataType: "json",
    delay: 250,
    data: function(params) {
      return {
        str: params.term
      };
    },
    processResults: function(data) {
      return {
        results: data
      };
    },
    cache: true
  }            
});

$("#emp_select2").select2({
  placeholder: "Search for employee",
  minimumInputLength: 1,
  ajax: {
    url: "something.php",
    dataType: "json",
    delay: 250,
    data: function(params) {
      return {
        str: params.term
      };
    },
    processResults: function(data) {
      return {
        results: data
      };
    },
    cache: true
  }            
});

$("#emp_select3").select2({
  ....SAME....            
});

Я пытался изменить # emp_select1 на .myselect2 , но он не применяет select2 к каждому раскрывающемуся списку

1 Ответ

0 голосов
/ 25 апреля 2020

Я бы предложил снова использовать класс и попытаться увидеть вашу консоль на наличие ошибок. Использование класса должно работать нормально, как показано ниже. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>



<select class="myselect2" id="emp_select1"></select>
<select class="myselect2" id="emp_select2"></select>
<select class="myselect2" id="emp_select3"></select>

<script>
$(document).ready(function(){
  $(".myselect2").select2({
    placeholder: "Search for employee",
    minimumInputLength: 1  
  });
})
</script>
...