如何获取Bootstrap Selectpicker搜索下拉框的选中选项值？

首先先确认一个基础点：你的<option>标签有没有设置正确的value属性？比如China对应的选项应该写成这样：

<option value="CN">China</option>

如果这一步没做对，后面肯定拿不到正确的值，先检查这个！

接下来，因为你用的是Bootstrap Selectpicker这个增强组件，它不是原生的下拉框，所以直接用原生的change事件或者val()有时候会出问题（比如你遇到的总是返回第一个选项的情况），得用它专门提供的事件和方法：

1. 监听选择变化并获取值 #

用Selectpicker自带的changed.bs.select事件来监听选择变动，这个事件会在用户选完选项后触发，能准确拿到最新的选中值：

// 等DOM加载完成后绑定事件
$(document).ready(function() {
  $('#select-country').on('changed.bs.select', function() {
    const country = $(this).val();
    console.log(country); // 选China就会输出CN，选US就输出US
    // 这里可以把country赋值给你的变量
  });
});

2. 主动获取值（比如点击按钮时） #

如果不是监听变化，而是需要主动去拿当前选中的值（比如用户点了提交按钮），可以用Selectpicker的val方法：

const selectedCountry = $('#select-country').selectpicker('val');
console.log(selectedCountry);

或者也可以直接用$('#select-country').val()，但用组件自带的方法更稳妥，避免组件状态不同步的问题。

为什么你之前总是拿到US？ #

大概率是这两个原因：

• 你的默认选项<option disabled>Select a Country</option>没有设置selected和value=""，导致页面加载时自动选中了第一个可选中的选项（也就是US）。可以把默认选项改成这样：

  <option disabled selected value="">Select a Country</option>
  

  这样初始状态下不会选中任何有效选项，用户必须主动选择后才会有值。
• 你用了原生的change事件，而Selectpicker的UI更新后，原生下拉框的change事件可能没有正确触发，导致你拿到的还是初始的选中值。

最后再确认一下：你已经正确引入了Bootstrap Select的CSS和JS文件，组件是正常初始化的吧？如果没手动初始化，可以在DOM ready里加一句：

$('#select-country').selectpicker();

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