多选下拉框选中指定值时显示/隐藏Div的实现需求及代码

没问题，我来帮你实现这个需求——当多选下拉框选中特定值（比如你示例里的Q，value为q）时显示目标Div，否则隐藏它。下面分两种方案给你，一种是结合你用到的Select2的jQuery方案，另一种是原生JS方案，你可以根据自己的项目情况选择：

首先补全你的HTML结构，加上需要控制显示隐藏的目标Div：

<select name="result" id="result" class="form-control select2" style="width: 70%" multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="q">Q</option>
</select>

<!-- 目标Div，初始隐藏 -->
<div id="targetDiv" style="display: none; margin-top: 10px; padding: 10px; background: #f5f5f5;">
  这是选中Q后要显示的内容
</div>

然后写JS代码（需要确保已经引入jQuery和Select2脚本）：

// 初始化Select2
$(document).ready(function() {
  $('#result').select2();

  // 定义要监听的目标值
  const targetValue = 'q';
  const $targetDiv = $('#targetDiv');

  // 检查选中状态并控制Div显示的函数
  function checkSelected() {
    // 获取当前选中的所有值，返回数组
    const selectedValues = $('#result').val();
    // 判断数组中是否包含目标值，注意空数组的情况
    const hasTarget = selectedValues && selectedValues.includes(targetValue);
    // 根据结果显示/隐藏Div
    $targetDiv.toggle(hasTarget);
  }

  // 页面加载时先检查一次初始状态
  checkSelected();

  // 监听Select2的change事件
  $('#result').on('change', function() {
    checkSelected();
  });
});

代码说明： #

• toggle(hasTarget)会根据hasTarget的布尔值自动显示（true）或隐藏（false）Div，比单独写show/hide更简洁。
• 页面加载时调用checkSelected()是为了处理初始状态（比如页面加载时下拉框已经默认选中了Q的情况）。
• Select2的change事件会在用户选择/取消选择选项时触发，确保状态实时更新。

如果你项目里不用jQuery，也可以用原生JS实现：
HTML结构和上面一致，JS代码改成：

document.addEventListener('DOMContentLoaded', function() {
  const selectElement = document.getElementById('result');
  const targetDiv = document.getElementById('targetDiv');
  const targetValue = 'q';

  // 检查选中状态的函数
  function checkSelected() {
    // 获取所有选中的option
    const selectedOptions = Array.from(selectElement.selectedOptions);
    // 提取选中的值数组
    const selectedValues = selectedOptions.map(opt => opt.value);
    // 判断是否包含目标值
    const hasTarget = selectedValues.includes(targetValue);
    // 控制Div显示
    targetDiv.style.display = hasTarget ? 'block' : 'none';
  }

  // 初始检查
  checkSelected();

  // 监听change事件
  selectElement.addEventListener('change', checkSelected);
});

注意事项： #

• 如果你用了Select2，原生JS的change事件仍然会触发，因为Select2会同步原生select的状态，所以这个方案也适用。
• selectedOptions是原生select元素的属性，直接获取所有选中的选项，兼容性很好。

你只需要把targetValue改成你实际需要监听的那个值，就可以完美实现需求啦。

内容的提问来源于stack exchange，提问作者user_777