如何获取下拉菜单值？SIS学校联系表单显示隐藏功能异常求助

嘿，我来帮你搞定这两个问题😉，咱们先理清楚思路，一步步来：

一、获取下拉菜单的选中值 #

你可以用原生JavaScript或者jQuery来实现，两种方式都给你列出来，按需选用：

原生JavaScript实现 #

通过你设置的id:SelectSchools直接获取元素，读取它的value属性就能拿到选中值：

// 获取下拉菜单DOM元素
const selectSchools = document.getElementById('SelectSchools');
// 拿到当前选中的选项值
const selectedSchool = selectSchools.value;

// 想快速验证的话，可以在控制台打印结果
console.log('当前选中的学校：', selectedSchool);

jQuery实现（如果项目已引入jQuery） #

用jQuery的选择器和val()方法会更简洁：

const selectedSchool = $('#SelectSchools').val();
console.log('当前选中的学校：', selectedSchool);

二、修复「非SIS Bona Vista时隐藏右侧列」的功能 #

这个功能失效大概率是因为没正确监听下拉菜单的变化事件，或者没处理页面加载时的初始状态。咱们直接写完整的可运行逻辑：

步骤1：定义显示/隐藏的核心逻辑 #

先写一个通用函数，根据选中值控制SelectBv的显示状态：

function toggleSelectBv() {
  const selectSchools = document.getElementById('SelectSchools');
  const selectBv = document.getElementById('SelectBv');
  
  // 判断选中值是否为"SIS Bona Vista"
  if (selectSchools.value === 'SIS Bona Vista') {
    // 显示右侧列（如果你的布局用了grid/flex，把block改成对应属性即可）
    selectBv.style.display = 'block';
  } else {
    // 隐藏右侧列
    selectBv.style.display = 'none';
  }
}

步骤2：绑定事件并处理初始状态 #

页面加载完成后，给下拉菜单绑定change事件，同时初始执行一次函数确保状态正确：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const selectSchools = document.getElementById('SelectSchools');
  
  // 监听下拉菜单的选项变化事件
  selectSchools.addEventListener('change', toggleSelectBv);
  
  // 页面加载时先执行一次，避免默认选中非Bona Vista时右侧列仍显示
  toggleSelectBv();
});

如果你用jQuery，代码可以简化成这样： #

$(document).ready(function() {
  function toggleSelectBv() {
    const selectedSchool = $('#SelectSchools').val();
    selectedSchool === 'SIS Bona Vista' ? $('#SelectBv').show() : $('#SelectBv').hide();
  }
  
  // 绑定change事件
  $('#SelectSchools').on('change', toggleSelectBv);
  
  // 初始执行一次
  toggleSelectBv();
});

额外注意事项 #

如果你的表单是Contact Form 7异步加载的（比如通过滚动或按钮触发加载），需要用事件委托来绑定，避免事件失效：

// 原生JS委托模式
document.addEventListener('change', function(e) {
  if (e.target.id === 'SelectSchools') {
    toggleSelectBv();
  }
});

// jQuery委托模式
$(document).on('change', '#SelectSchools', toggleSelectBv);

这样就能完美解决你的两个问题啦！

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