如何将多选select元素的选中值传递到JavaScript代码中使用？

直接用jQuery原生的表单取值能力即可，不需要手动循环遍历拼接选中值，返回结果完全匹配你需要的单值/数组两种hl参数格式。

操作步骤 #

• 先给目标select加唯一定位标识，避免取到页面上其他同类型元素的值，比如给select设置id：

<select multiple id="langSelect">
  <option value="en">English</option>
  <option value="de">German</option>
</select>

• 调用jQuery的val()方法获取选中值，这个方法对多选select的返回逻辑完全适配需求：
  • 仅选中1个选项时，直接返回对应value的字符串，比如选中英语就返回"en"
  • 选中多个选项时，返回所有选中值组成的数组，比如两个都选就返回["en", "de"]
  • 未选中任何选项时返回null，可以根据业务逻辑加默认值兜底
• 把获取到的值直接填入ajax的data参数即可，完整可运行的代码如下：

// 获取多选select的选中值，自动适配单值/数组格式
const selectedLangs = $('#langSelect').val();
// 可选：如果需要设置未选中时的默认语言，比如默认英语
// const selectedLangs = $('#langSelect').val() || 'en';

$.ajax({
    url: window.location.protocol + "//example.com/search",
    jsonp: "jsonp",
    dataType: "jsonp",
    data: {
        q: querykeyword,
        client: "chrome",
        hl: selectedLangs
    }
})

常见注意点 #

• 不要自己写循环遍历所有option判断选中状态，jQuery的.val()方法已经对多选表单元素做了专门优化，取值准确不会漏选、错选
• jQuery的ajax模块会自动处理参数序列化：不管传入的是单值字符串还是多值数组，都会按照HTTP请求规范拼接参数，后端可以正常解析
• 尽量避免用$('select[multiple]')这类泛选择器取值，一旦页面存在多个多选下拉框，很容易取到错误元素的值，给目标select加唯一id是最稳妥的实现方式

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