javascript - 'optgroup' 元素标签未读取空格后的字符串

Question

当代码运行时，下面的标签不会读取空格后的字符串“数据”。我尝试在 optgroup 元素上使用一些 CSS，但它没有对其标签进行任何更改。

var data = "Names of Meters";
var func = function() {
  var options = 
      "<optgroup label=" +data+ ">"
        +'<option value="Meter1" >' + "Temperature" + '</option>'
        +'<option value="Meter2" >' + "Wave" + '</option>'
        +'<option value="Meter3" >' + "Wind Speed" + '</option>'
      + "</optgroup>";
  return options
  }
  document.getElementById("demo").innerHTML = func();

   <select type='list' name='sensors' id ="demo" multiple></select>

Answer 1

您错过了标签名称的引号。

var data = "Names of Meters";
var func = function() {
    // here, surround the 'data' with single quotation marks
    var options = "<optgroup label='" + data + "'>"
        + '<option value="Meter1" >' + "Temperature" + '</option>'
        + '<option value="Meter2" >' + "Wave" + '</option>'
        + '<option value="Meter3" >' + "Wind Speed" + '</option>'
        + "</optgroup>";
    return options;
};
document.getElementById("demo").innerHTML = func();

<select type='list' name='sensors' id ="demo" multiple></select>

But why is it still reading until the white space even if without quotation marks?

因为不需要在属性值周围加上引号。例如，您可以使用

<input value=4 />

但是，有时需要使用引号(如本例)。如果该值包含空格，它将无法正确显示。

参见 HTML Attributes