javascript - 将文本连接到具有特定数据属性值的选项

Question

我有一个选择元素:

function find() {
  var schoolList = document.getElementByID("schoolList");

  if (schoolList.hasAttributes("[data attribute value]") {
      //modify text in found option
    };


  };

  find();

<div id="SelectWrapper" class="menu">
  <form>
    <select id="schoolList"> 
            <option value='student' data-tier="student" data->Student 1</option>
            <option value="teacher" data-tier="faculty" data->Teacher</option>
    </form> 
</div>

使用纯 Javascript，我想在函数中创建一个 if 语句，检查选项是否具有适当的数据属性值(例如“学生”或“教师”)，然后添加或修改现有选项内部HTML/文本。

Answer 1

您可以使用 querySelectorAll() 查找具有特定数据值的所有选项，然后循环遍历它们。

function find() {
    var options = document.querySelectorAll("#schoolList option[data-tier=student]");
    for (var i = 0; i < options.length; i++) {
        options[i].innerHTML += " (something)";
    }
}