Bootstrap Selectpicker页面加载时获取选中值为null的问题排查

这个问题的核心在于bootstrap-select（也就是你用的selectpicker）的初始化是异步过程。当你在$(document).ready()里调用$('.selectpicker').selectpicker()后，浏览器需要一点时间完成这些操作：

• 隐藏原生的<select>元素
• 生成自定义的下拉UI组件
• 将原生select的选中状态同步到新生成的组件上

你在初始化代码之后立刻调用$("#level").val()，这时候组件的初始化还没完成，所以拿到的结果是null。而当触发change事件时，组件已经完全就绪，自然能正确获取选中值。

有两种简单有效的解决方式：

方法1：监听组件初始化完成事件 #

bootstrap-select提供了loaded.bs.select事件，这个事件会在组件完全加载并初始化完成后触发。把获取值的代码放在这个事件的回调里就能拿到正确结果：

$(document).ready(function() {
  $('.selectpicker').selectpicker();
  
  // 监听组件加载完成事件
  $('#level').on('loaded.bs.select', function() {
    alert($(this).val()); // 现在能正确拿到选中值"1"
  });
});

function Change(level){
  alert($(level).val());
}

方法2：使用组件内置方法获取值 #

你也可以直接用bootstrap-select提供的selectpicker('val')方法获取选中值，这个方法会确保从组件的当前状态中读取正确的值：

$(document).ready(function() {
  $('.selectpicker').selectpicker();
  
  // 使用组件内置方法获取值
  alert($('#level').selectpicker('val'));
});

function Change(level){
  alert($(level).val());
}

其实在组件初始化完成后，直接使用jQuery.val()也是有效的，但关键是要等初始化过程结束。上面的两种方法都能帮你把握正确的时机，避免出现null的情况。

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