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语句，检查选项是否具有适当的数据属性值（例如，“student”或“faculty”），然后添加或修改现有的的innerHTML /文本。

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)";
    }
}

Answer 2

你的例子

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

  if (schoolList.hasAttributes("[data attribute value]")) {
    var opts = schoolList.getElementsByTagName("option");
    for (var i = 0, len = opts.length; i < len; i++) {
       var option = opts[i];
       // modify
      if (option["data-tier"] === "student") {
        option.text = "new text content"
      }
    }
    // add new
    for (var i =0; i < 5; i++) {
      var opt = document.createElement("option");
      opt.value = i;
      opt.innerHTML = "Option " + i;
      schoolList.appendChild(opt);
    }
  };
};

find();

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

2 个答案: