如何修复select选项值含空格时被截断的问题？

不管是静态还是动态生成的<option>，核心问题都是**value属性值未被正确的引号完整包裹**：

• 静态代码中，若value未加引号（如value=Hello World），浏览器会将空格前的Hello识别为value值，World被当成独立属性；
• 动态生成时，你的拼接逻辑没给value值添加引号，导致Team A被拆成value='Team'和额外的A属性，最终value只保留Team。

1. 修复静态<select>代码 #

确保value值用单引号或双引号完整包裹：

<select>
   <option value="Hello World"></option>
</select>

2. 修复动态生成函数 #

推荐两种可靠实现方式：

方式一：使用ES6模板字符串（简洁易读） #

function getTeams(tournamentTeams){
  let players = ''; // 必须初始化变量，避免未定义报错
  tournamentTeams.forEach(element => {
    players += `<option value="${element[0]}">${element[0]}</option>`;
  });
  return players;
}

方式二：手动引号包裹（兼容旧环境） #

如果需要兼容不支持ES6的环境，可通过引号嵌套实现：

function getTeams(tournamentTeams){
  let players = '';
  tournamentTeams.forEach(element => {
    players += '<option value="' + element[0] + '">' + element[0] + '</option>';
  });
  return players;
}

修复后生成的正确HTML代码为：

<option value="Team A">Team A</option>
<option value="Team B">Team B</option>

此时再获取option的value值，就能拿到完整的Team A或Hello World了。

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