如何根据在select2 jQuery字段中选择的多个值显示/隐藏div

在select2 jQuery字段中选择多个值后，可以使用以下方法来显示/隐藏div：

首先，为select2字段添加一个change事件监听器，以便在选择值发生变化时触发相应的操作。

$('#select2-field').on('change', function() {
  // 在这里执行显示/隐藏div的逻辑
});

在change事件处理程序中，获取选择的多个值。可以使用val()方法来获取select2字段的值，它将返回一个数组。

var selectedValues = $('#select2-field').val();

根据选择的值来显示/隐藏div。可以使用each()方法遍历选择的值，并根据每个值的条件来显示或隐藏相应的div。

$.each(selectedValues, function(index, value) {
  if (value === 'value1') {
    $('#div1').show();
  } else if (value === 'value2') {
    $('#div2').show();
  } else {
    // 其他情况隐藏div
    $('#div1').hide();
    $('#div2').hide();
  }
});

在上述代码中，#div1和#div2是要显示/隐藏的div的选择器。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
</head>
<body>
  <select id="select2-field" multiple="multiple">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
  </select>

  <div id="div1" style="display: none;">Div 1</div>
  <div id="div2" style="display: none;">Div 2</div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#select2-field').select2();

      $('#select2-field').on('change', function() {
        var selectedValues = $(this).val();

        $.each(selectedValues, function(index, value) {
          if (value === 'value1') {
            $('#div1').show();
          } else if (value === 'value2') {
            $('#div2').show();
          } else {
            $('#div1').hide();
            $('#div2').hide();
          }
        });
      });
    });
  </script>
</body>
</html>

这样，根据在select2 jQuery字段中选择的多个值，相应的div将会显示或隐藏。