Select2下拉框选中首个选项禁用其余、选中其他选项禁用首个的实现问题

首先确保已引入jQuery、Select2 对应的 CSS 和 JS 依赖，使用以下代码即可满足需求：

<!-- 原有下拉框结构 -->
<select class="select2">
  <option value="Package">Complete Package</option>
  <option value="Hotel">Hotel Only</option>
  <option value="Transport">Transport Only</option>
  <option value="Misc">Misc</option>
</select>

<script>
// 初始化Select2
$('.select2').select2();

// 监听选中值变化事件
$('.select2').on('change', function () {
  const selected = $(this).val();
  const $allOptions = $(this).find('option');
  // 先重置所有选项的禁用状态
  $allOptions.prop('disabled', false);

  if (selected === 'Package') {
    // 选中首个套餐选项时，禁用其余所有单项
    $allOptions.not(':first').prop('disabled', true);
  } else if (selected) {
    // 选中任意单项时，禁用首个套餐选项
    $allOptions.first().prop('disabled', true);
  }

  // 触发Select2更新，让禁用状态生效
  $(this).trigger('change.select2');
});
</script>

补充说明 #

如果你的下拉框开启了多选模式，只需调整判断逻辑，校验选中值数组中是否包含Package即可，核心禁用逻辑无需修改。

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