SELECT2 - 重复选项答案

【问题标题】：SELECT2 - Repeating optionsSELECT2 - 重复选项
【发布时间】：2020-04-24 23:43:57
【问题描述】：

我有几个下拉菜单，如下所示

<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 应用于每个下拉菜单

【问题讨论】：

标签： jquery jquery-select2

【解决方案1】：

我建议再次使用该类，并尝试查看您的控制台是否有任何错误。使用该类应该可以正常工作，如下所示。

<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>

【讨论】：