Question

我需要在表单中显示的每个<select>的顶部注入一个新选项。到目前为止，我已经能够使用

以特定形式完成

function myFunction() {
    var x = document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = "Please Select";
    x.add(option, x[0]);
}

问题在于我需要为每个表单和每个<select>都使用它，因此无法在我的代码中指定ID。 getElementById是否有替换目标所有选择而不管其类或ID？

Answer 1

document.querySelectorAll()可能就是你要找的东西

然后您可以执行类似

的操作

const selects = document.querySelectorAll('select');

Answer 2

您可以使用getElementsByTagName()方法

var x = document.getElementsByTagName("SELECT");

for(var i=0;i<x.length;i++){
  var option = document.createElement("option");
  option.text = "Please Select";
  x[i].appendChild(option);
}

<select></select>

<select></select>

Answer 3

你可以使用 document.getElementsByTagName（＆＃34; select＆＃34;），这将提供所有选择元素的集合

＆＃13;

 
var allSelect =  document.getElementsByTagName("select");
for(var i=0;i<allSelect.length;i++){
  
    var x = allSelect[i];
    var option = document.createElement("option");
    option.text = "Please Select";

    /** to make this selected by default we have to set attribute value **/
    var att = document.createAttribute("selected");  
    att.value = "selected";
    option.setAttributeNode(att);
    x.add(option, x[0]);
  }

＆＃13;

<form id="test">
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
</form>

＆＃13;

Javascript - 定位所有html选择，而不是ID或类

3 个答案: