将html选择值放入js变量时出错

Question

所以我正在一个项目上，我需要采用选择菜单的值。但是，当我这样做时，出现错误 TypeError：无法读取null的属性'options'。希望你们能有所帮助？ 这是我用于选择菜单的HTML代码：

<div id="MetalTypeSect">
  <h2><a id="MetalType"></a>Metal Type</h2>
    <select id="select1">
      <option value="blank">--Select--</option>
      <option value="Alum">Alum. 5052</option>
      <option value="GalvL">Galvaneal</option>
      <option value="CRS">CRS</option>
      <option value="SST">SST304</option>
      <option value="GalvZ">Galvanized</option>
    </select>
</div>

这是我的js代码

var metalTypeSelectedValue = document.getElementById("select1");
var metalType = 
metalTypeSelectedValue.options[metalTypeSelectedValue.selectedIndex].value;

while(true) {
  if(metalType == "blank") {
    document.getElementById("AlumThickness").style.visibility="hidden";
  }
}

该错误在js代码的第2行显示。救命！

Answer 1

使用onchange（）事件。像这样

<select id="select1" onchange="myFunction()">

然后在您的js函数中获取价值

function myFunction() {
    var metalType = document.getElementById("select1").value;

    if(metalType == "blank") {
        document.getElementById("AlumThickness").style.visibility="hidden";
    }
}