如何预选一个 <select>使用JavaScript列出项目

Question

我有这个标记和JavaScript。 我无法在页面加载时预先选择“T”选项（例如）。 可能吗？

    <select id="serviceType" name="serviceType" class="form-control">
      <option value="S">S</option>
      <option value="T">T</option>
      <option value="X">X</option>
    </select>
    <script>
        //document.getElementById("serviceType").selectedIndex = "T"; // did not work
      var e = document.getElementById("serviceType");
      e.options[e.selectedIndex].value = "T"; // does not work
    </script>

注意：“T”在PHP调用时的页面构建时是动态的。 所以我的脚本实际上是这样的： = "<? echo $_POST['serviceType']; ?>"

Answer 1

您的注释掉的行不起作用，因为select元素的selectedIndex属性需要您想要选择的元素的序数索引。

 document.getElementById("serviceType").selectedIndex = 1; 

 <select id="serviceType" name="serviceType" class="form-control"> <option value="S">S</option> <option value="T">T</option> <option value="X">X</option> </select> 

如果要按值设置，则还可以设置元素的value属性

 document.getElementById("serviceType").value= "T"; 

 <select id="serviceType" name="serviceType" class="form-control"> <option value="S">S</option> <option value="T">T</option> <option value="X">X</option> </select> 

Answer 2

就这样做：

var e = document.getElementById("serviceType");
e.value="T";

这是工作小提琴 。

Answer 3

您必须设置select标记的value而不是option ：

var e = document.getElementById("serviceType");
e.value = "T";

Answer 4

最简单的方法是在html5中使用selected

<select id="serviceType" name="serviceType" class="form-control">
  <option value="S">S</option>
  <option value="T" selected>T</option>
  <option value="X">X</option>
</select>