时间戳

首页 > 解决方案 > 突出显示将 id 选择器传递给函数的特定 select2

javascript - 突出显示将 id 选择器传递给函数的特定 select2

问题描述

我只需要突出显示#vans 而不是#cars

有时#vans 可以是多个，有时它也可以是非多个。但是，我必须能够专门传递 ID 选择器以突出显示选择。这是使用突出显示方法和使用 css 选择器答案的突出显示 select2下面的代码

<!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>
  
  
  <script>
  function highlightSelect2(selector, isMultiple) {
  var isWhat = isMultiple ? '--multiple' : '__rendered'
  $('.select2-selection' + isWhat).effect("highlight", {
    color: '#f88'
  }, 10000);
}

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

  $('.mySelect').each(function(index, element) {
    let prop = $(element).prop('multiple')
    prop ? highlightSelect2("#vans",prop) : highlightSelect2("#vans")
  })
});
</script>
  
  
</body>

</html>

标签： javascripthtmljquerycssjquery-select2

解决方案

如果您知道只select#vans需要突出显示，则不需要遍历所有 Select2 jQuery 项。此外，您highlightSelect2没有使用selector您传入的内容。

使用您的代码示例，我对其进行了修改，以便仅#vans通过以下方式突出显示元素：

  • 不迭代所有select2元素（使用.each）
    • 这让您只突出显示#vans, 直接
  • 修改highlightSelect2为使用传入的selector
  • 去除isMultiple逻辑——没必要

<!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>
  
  
  <script>
  function highlightSelect2(selector) {

    $(selector)
      .next('.select2-container')
      .find(".select2-selection")
      .effect("highlight", {
        color: '#f88'
      }, 10000);
  }

$(document).ready(function() {
  //initilize select2
  $('.mySelect').select2( { width: "25%" });

  // highlight the #vans select2
  highlightSelect2("#vans");
});
</script>
  
  
</body>

运行代码片段，您会看到它按照您对特定示例的预期工作。

推荐阅读