如何在JavaScript和CSS中为下拉列表值的innerHTML保留空格？

问题原因 #

你生成<option>元素时，value属性未用引号正确包裹。代码里写的value=${e}"会让浏览器把空格后的内容识别为新的HTML属性，导致原本的字符串被截断。

修复方案 #

将所有生成<option>的模板字符串中，value=${e}"改为value="${e}"，用双引号完整包裹属性值，确保带空格的字符串能被整体识别。

修复后的完整代码 #

const AppleList = ['iPhone 6s' , 'iPhone 7', 'iPhone 7 Plus','iPhone 8' 
                  ,'iPhone X' , 'iPhone Xs' , 'iPhone Xs Max' ,'iPhone Xr','iPhone 11'
                  ,'iPhone 11 Pro','iPhone 11 Pro Max'
                  ,'iPhone 12','iPhone 12 Pro', 'iPhone 12 Pro Max'
                  ,'iPhone 13','iPhone 13 Pro', 'iPhone 13 Pro Max'
                  ,'iPhone 14','iPhone 14 Pro', 'iPhone 14 Pro Max'];

const GoogleList = ['Pixel 3a' , 'Pixel 4'];
const SamsungList = ['S22','S21'];
const ErrorList = ['Select'];
const Repair1List = ['back' , 'front'];
const Repair2List = ['Pixel 3a Screen', 'Pixel 4 Screen'];
const Repair3List = ['S22 Screen', 'S21 Screen'];
const RepairTypeList =['Glass/LCD Screen Repair', 'Housing / Back Glass ', 
                        ' Front Facing Camera', 'Rear Camera', 'Charge Port' ,'Volume Buttons']


function Brand(e)
{
    listselect.innerHTML="";

  if (Brandselect.value == "Apple")
  {
    AppleList.forEach(e => listselect.innerHTML += `<option value="${e}">${e}</option>`);
  } 
  else if(Brandselect.value == "Google")
  {
    GoogleList.forEach(e => listselect.innerHTML += `<option value="${e}">${e}</option>`);
  }
   else if(Brandselect.value == "Samsung")
  {
    SamsungList.forEach(e => listselect.innerHTML += `<option value="${e}">${e}</option>`);
  }
  else
  {
    ErrorList.forEach(e => listselect.innerHTML += `<option value="${e}">${e}</option>`);
  }
}
Brandselect.addEventListener('change', Brand);
Brand();



function Model(f)
{
    RepairSelect.innerHTML="";
    
  RepairTypeList.forEach(f => RepairSelect.innerHTML += `<option value="${f}">${f}</option>`)


}
listselect.addEventListener('change', Model);
Model();

额外优化建议 #

把重复的生成选项逻辑封装成函数，减少代码冗余：

function renderOptions(selectElement, options) {
  selectElement.innerHTML = options.map(option => `<option value="${option}">${option}</option>`).join('');
}

之后在Brand和Model函数里直接调用即可，比如renderOptions(listselect, AppleList)，代码会更简洁易维护。

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