JavaScript如何获取下拉框的值并拼接为字符串，空值报错如何解决？

报错根因 #

document.getElementById方法需要传入字符串格式的DOM节点ID，你当前代码里没有给transType加引号，JS会将其识别为未定义的变量，导致无法匹配到对应下拉框节点，返回null，后续调用.options属性就会触发空值报错。

修复后的取值代码 #

// 将id用引号包裹，作为字符串传入
var transTypeSelect = document.getElementById('transType');
// 增加非空判断，避免DOM未加载完成时触发报错
var type = transTypeSelect ? transTypeSelect.options[transTypeSelect.selectedIndex].text : '';

如果需要获取下拉框选中项的value属性（比如示例里的A/B/C等），把末尾的.text替换为.value即可。

多下拉框值拼接方法 #

你提到的直接用+拼接变量的写法是可行的，为了避免不同下拉框的内容连在一起难以区分，建议增加自定义分隔符：

// 写法1：加号拼接
var allTogether = type + '|' + type1 + '|' + type2;
// 写法2：模板字符串拼接，可读性更高
var allTogether = `${type}|${type1}|${type2}`;

如果下拉框数量较多，推荐用批量处理的方式简化代码：

// 按顺序填入所有下拉框的ID
var selectIdList = ['transType', 'type1', 'type2', '其他下拉框ID'];
// 批量取值后拼接
var allTogether = selectIdList.map(function(id) {
  var dom = document.getElementById(id);
  return dom ? dom.options[dom.selectedIndex].text : '';
}).join('|'); // 引号内为分隔符，不需要分隔就填空字符串''

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