如何在test_data函数中获取Select框的选中值？

看起来你已经搞定了下拉框的change事件监听，现在想在test_data()里拿到选中值对吧？这里有几种实用的方案，你可以根据自己的场景选：

方案1：用全局变量存储选中值 #

这是最简单的方式，把选中值存在全局作用域里，这样test_data()随时都能访问到：

// 声明全局变量来存选中值
let selectedTestValue;

$(document).on('change','.test',function(){ 
  selectedTestValue = $('option:selected',this).val();
  alert(selectedTestValue); 
});

function test_data() { 
  // 直接用全局变量就行
  console.log(selectedTestValue);
  // 这里写你要处理的逻辑
}

⚠️ 小提醒：全局变量虽然方便，但如果项目里代码多了，可能会和其他变量冲突，所以小型项目用用没问题，大型项目尽量谨慎点。

方案2：在函数里主动获取实时选中值 #

这种方法更稳妥，不需要依赖外部变量，每次调用test_data()时直接查询下拉框的当前状态：

$(document).on('change','.test',function(){ 
  const val = $('option:selected',this).val();
  alert(val); 
});

function test_data() { 
  // 两种写法都可以，第二种更简洁
  // const selectedVal = $('.test option:selected').val();
  const selectedVal = $('.test').val(); // jQuery的val()对select直接返回选中值
  console.log(selectedVal);
}

如果页面上有多个.test类的下拉框，$('.test').val()会返回第一个匹配的选中值，要是需要处理多个的话，可以用.each()遍历每个下拉框获取各自的值。

方案3：在change事件中直接传值给函数 #

如果你的test_data()需要在下拉框变化时立即执行，那可以直接在change事件里调用函数并把选中值传进去：

$(document).on('change','.test',function(){ 
  const val = $('option:selected',this).val();
  alert(val);
  // 触发change时直接调用函数并传值
  test_data(val);
});

function test_data(selectedVal) { 
  // 直接使用传入的参数
  console.log(selectedVal);
}

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