使用高亮方法和使用 css 选择器高亮 select2

Question

我需要突出显示汽车和货车，下面的函数将突出显示非多选 2 列表，我需要突出显示多选和非多选。

<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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 name="cars" id="cars" multiple>
  <option value="volvo">Cars</option>

</select>

<select name="vans" id="vans">
  <option value="volvo">Vans</option>
</select>



<script>
function highlightSelect2(type, selector) {
    $(type+'select2-'+ selector +'-container').effect("highlight", {
        color: '#f88'
    }, 10000);
}

$(document).ready(function() {
    $('#cars').select2();
    $('#vans').select2();
    
    highlightSelect2("#","cars")
    highlightSelect2("#","vans")
});

</script>
</body>
</html>

Answer 1

您可以定义实际的 select2 classes，它们在库中将始终相同并且永远不会改变。

首先，检查select2是否为多个。并通过传递 true 相应地调用您的 highlightSelect2 函数 multiple select 突出显示其他和正常 __rendered select2 选项。

将 class 添加到您的 html selects 并检查它们是否具有 multiple 属性并调用 select2 for highlighting that html select.

工作演示：

function highlightSelect2(isMultiple = null) {
  //is multiple
  var isWhat = isMultiple ? '--multiple' : '__rendered'
  //highlight
  $('.select2-selection' + isWhat).effect("highlight", {
    color: '#f88'
  }, 10000);
}

$(document).ready(function() {
  //initilize select2
  $('.mySelect').select2();

  //check each and highlight
  $('.mySelect').each(function(index, element) {
    //check if its muliple
    let prop = $(element).prop('multiple')
    //call functions
    prop ? highlightSelect2(prop) : highlightSelect2()
  })
});

<!DOCTYPE html>
<html>
<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <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 name="cars" class="mySelect" id="cars" multiple>
    <option value="volvo">Cars</option>
  </select>
  <select name="vans" class="mySelect" id="vans">
    <option value="volvo">Vans</option>
  </select>
</body>

</html>

使用高亮方法和使用 css 选择器高亮 select2

Highlight a select2 using highlight method and using css selector

javascript

css

jquery

jquery-ui

jquery-select2