基于Select2选择结果显示/隐藏div的实现问题

嘿，我来帮你解决这个Select2多选字段的显示/隐藏问题！

首先得明确：多选模式下的Select2，选中的选项是一个集合，没法像单选那样直接取单个value判断，这也是你之前代码失效的核心原因。下面给你两种靠谱的实现方式，都能搞定选中“Other”时显示对应div的需求：

方式一：监听原生change事件（简洁高效） #

这种方式直接利用Select2触发的原生select change事件，获取所有选中值后判断是否包含“Other”选项的value：

HTML结构

<select id="category-select" multiple="multiple">
  <option value="tech">技术</option>
  <option value="life">生活</option>
  <option value="other">Other</option>
</select>

<div id="other-content" style="display: none; margin-top: 10px;">
  请补充其他信息：<input type="text" placeholder="输入内容">
</div>

JavaScript代码

// 先初始化Select2
$('#category-select').select2({
  placeholder: "请选择分类",
  allowClear: true
});

// 绑定change事件
$('#category-select').on('change', function() {
  // 获取所有选中的值，返回一个数组（多选模式下）
  const selectedValues = $(this).val();
  
  // 判断数组中是否包含"other"（注意替换成你实际的选项value）
  if (selectedValues && selectedValues.includes('other')) {
    $('#other-content').show();
  } else {
    $('#other-content').hide();
  }
});

方式二：监听Select2专属事件（更精细控制） #

如果你需要对“选中”和“取消选中”动作做更细致的处理，可以用Select2提供的select:select和select:unselect事件：

$('#category-select').select2({
  placeholder: "请选择分类",
  allowClear: true
});

// 选中选项时触发
$('#category-select').on('select:select', function(e) {
  const selectedItem = e.params.data;
  if (selectedItem.id === 'other') { // id对应option的value
    $('#other-content').show();
  }
});

// 取消选中选项时触发
$('#category-select').on('select:unselect', function(e) {
  const unselectedItem = e.params.data;
  if (unselectedItem.id === 'other') {
    $('#other-content').hide();
  } else {
    // 额外判断：如果取消的是其他选项，要确认是否还有"Other"被选中
    const currentSelected = $(this).val();
    if (!currentSelected || !currentSelected.includes('other')) {
      $('#other-content').hide();
    }
  }
});

关键注意点 #

• 确保你判断的是选项的value值，而不是显示文本（比如不要用selectedItem.text === 'Other'，因为文本可能变更，value更稳定）；
• 多选模式下$(select).val()返回的是数组，所以要用includes判断，不能直接和单个值比较；
• 要在Select2初始化完成后再绑定事件，避免事件失效。

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