HTML中bootstrap selectpicker获取选中值返回空白的正确语法求解

• 你当前编写的代码是固定查找select[name=cars]下value='1'的选项文本，你的下拉选项中没有value为1的选项，所以返回结果为空
• 没有筛选处于选中状态的选项，取值逻辑完全错误

针对bootstrap-select组件，可通过以下方式获取选中内容：

获取选中项的value值 #

两种写法均可：

//  bootstrap-select官方提供的专用API
const selectedValue = $('#cars').selectpicker('val');
// 原生jQuery语法也可直接生效
const selectedValue = $('#cars').val();

获取选中项的显示文本 #

const selectedText = $('#cars option:selected').text();

function myFunction() {
    const selectedValue = $('#cars').selectpicker('val');
    const selectedText = $('#cars option:selected').text();
    document.getElementById("demo").innerHTML = `选中值：${selectedValue}，选中文本：${selectedText}`;
    console.log(selectedValue, selectedText);
}

如果你的select是多选模式，取值逻辑不变，返回的结果会是包含所有选中项value的数组。如果动态修改过下拉选项，需要先执行$('#cars').selectpicker('refresh')刷新组件后再取值，避免读取到缓存的旧数据。

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